如何设置jquery UI可拖动的开始位置

Question

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

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

我查看了“开始”函数，并从事件中获得了正确的 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,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，如此处所述。