如何设置jQuery UI可拖动元素的起始位置

Question

我正在使用jQuery UI和isotope，isotope会对元素的定位做出一些调整，这会导致拖动元素的起始位置出现问题。

当我开始拖动时，我想要拖动的元素会显示在父容器的左上角，而不是鼠标指针下方。

我查看了“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;
}
});

我必须执行start/stop isotope操作才能解决一个问题，即isotope破坏了droppable功能，导致元素不知道它们被放置在何处。

我确信有一种方法可以设置可拖动项的起始位置，但我似乎在文档中找不到它，只能找到一种获取起始位置的方法。

- pedalpete

---

你能解决这个问题吗？我遇到了类似的问题，使用Isotope可拖动功能时似乎有些问题。可拖动元素的起始点偏移很大。 - Engin Erdogan

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;
    }
}
});

- user3591153

---

实际上...我猜这并不像我说的那样有效。它只是在不返回任何内容的情况下中断了开始事件。由于在结束开始事件之前设置了正确的位置，因此出于某种原因它仍然会拖动并具有正确的位置。如果该事件返回false，则会恢复到不正确的位置，因此您只需要调用异常才能使其正常工作。 - user3591153

Answer 2

对于 jQuery，您可以尝试使用 event.pageX 和 event.pageY，如 此处 所述。

- Ruben Verschueren