Question

我正在使用jQuery UI和同位素，同位素对元素的定位做了很多事情，并且弄乱了拖动元素的起始位置。

当我开始拖动时，我试图拖动的元素显示在父级的左上角，而不是光标下方。

我查看了'start'函数，我从事件中获得了正确的x，y坐标，但我似乎无法将这些值应用于克隆的可拖动项。

我的代码看起来像这样

jQuery('div.item').draggable({
         helper: function(event, ui){
                 jQuery('div.hold_items').isotope('destroy');
                  var item_dragged = jQuery(this).clone().appendTo('body').css({'z-index':500,'top':event.clientY, 'left':event.clientX});
                 start_isotope();
                 return recipe_dragged;

         }
});

我必须使用启动/停止同位素来解决同位素破坏可投放功能且物品不知道它们被丢弃的问题。

我确信有一种方法来设置可拖动的起始位置，但我似乎无法在文档中找到它，只是一种开始的方法。

Answer 1

发布我的答案，因为我在其他地方找不到答案 - 我有你描述的问题，我这样解决了.. 帮助者的位置（它会尝试重置为0,0）然后我们在重置为0之前返回false 它被取消并且位于正确的位置，但是我们通过复制用于启动拖动的事件来重新启动拖动。

$(" #container").droppable({
drop: function (event, ui) {
    $(ui.draggable).detach().css({
        top: 0,
        left: 0
    }).appendTo(this);

}
});

$(" #draggable").draggable({
start: function (event, ui) {
    if ($(event.target).parent().is('.ui-droppable')) {
        var x = ($(this).offset().left);
        var y = ($(this).offset().top);
        var p = $(event.target).parent().parent();
        $(event.target).detach().insertAfter(p);
        $(ui.helper).css({
            'left': x - $(event.target).offset().left,
            'top': y - $(event.target).offset().top
        });
        var eventCopy = document.createEvent("MouseEvents");
        eventCopy.initMouseEvent(event.type, event.bubbles, event.cancelable, event.view, event.detail,
        event.pageX || event.layerX, event.pageY || event.layerY, event.clientX, event.clientY, event.ctrlKey, event.altKey,
        event.shiftKey, event.metaKey, event.button, event.relatedTarget);
        ui.dispatchEvent(eventCopy);
        return false;
    }
}
});

Answer 2

对于jquery，您可以尝试使用event.pageX和event.pageY，如here所述。

如何设置jquery UI draggable的起始位置

2 个答案: