jquery - 需要有关 Jquery UI 拖放实例偏移问题的帮助

Question

我正在研究拖放功能，但在可拖动实例上遇到了偏移问题。出于某种原因，当我在放置区域下方使用以下代码时会更改位置。如果没有偏移，我的可拖动项目不会跟随鼠标并在拖动时漂浮在 div 的顶部。页面示例http://54.162.89.47。预先感谢您的帮助。

start: function(event, ui){  
$(this).draggable('instance').offset.click = {
    left: Math.floor(ui.helper.width() / 2),
    top: Math.floor(ui.helper.height() / 2)
};
} 

整个脚本如下所示：

$(".draggable").draggable({ 
cursor: "crosshair", 
revert: "invalid", 
helper: "clone",
tolerance: "fit",
start: function(event, ui){
    console.log($(this).draggable('instance').offset.click)
    $(this).draggable('instance').offset.click = {
        left: Math.floor(ui.helper.width() / 2),
        top: Math.floor(ui.helper.height() / 2)
    }; 
}
});
var text = '', droppedOn = '';

$("#drop").droppable({ accept: ".draggable", 
    drop: function(event, ui) {
        console.log("drop");
        $(this).removeClass("border").removeClass("over");
        var dropped = ui.draggable;
        droppedOn = $(this);
        text = $(dropped).attr('data-text');
        $('#drop-text').html('<p>'+text+'</p>');    
        $(dropped).clone().appendTo(droppedOn);         
    }, 
    over: function(event, elem) {
        $(this).addClass("over");
        $(droppedOn).find('img').remove();
    },
    out: function(event, elem) {
        $(this).removeClass("over");
    }
});

标签： jqueryjquery-uidrag-and-dropdraggableoffset