Jquery UI Draggable：将帮助器对齐鼠标位置

使用jQuery我有一个可拖动的元素。 它是一个大小为200 x 40的div。当然，用户可以通过单击div中的variuos位置来开始拖动此div。 我想要的是当startdrag事件发生时，无论用户开始拖动的div在哪里，helper（clone）div总是以相同的方式与光标对齐。

因此，在mousedown之后，帮助者的顶部和左侧值必须与鼠标x和y相同。 我用这个coffeescript代码试过这个：

onStartDrag: ( e, ui ) => ui.helper.css left: e.clientX top: e.clientY console.log( e ) 

但它不起作用，我的猜测是这种情况正在发生，因为我放入的值由于鼠标移动而被可拖动插件直接覆盖。

有任何想法吗？

Answer 1

在尝试了Amar的回答并意识到它cursorAt了与droppable交互之后，我深入挖掘，发现有一个专门支持这个名为cursorAt的选项。

 $('blah').draggable helper: -> ... custom helper ... cursorAt: top: 5 left: 5 

这将帮助程序的左上角放置在光标上方和左侧5个像素处，并与droppable正确交互。

http://api.jqueryui.com/draggable/#option-cursorAt

让我们在信用到期时给予信任。 谢谢，jquery-ui邮件列表档案！

https://groups.google.com/forum/#!topic/jquery-ui/Evb94G_QvNw

Answer 2

尝试这样设置，

  start: function (event, ui) { $(ui.helper).css("margin-left", event.clientX - $(event.target).offset().left); $(ui.helper).css("margin-top", event.clientY - $(event.target).offset().top); } 

看看这个jqFAQ.com ，它会对你更有帮助。

Answer 3

我找到了一个解决方案，这很容易，如果你使用可排序的插件，你可以像这样修复辅助位置：

 sort: function(e, ui) { $(".ui-sortable-handle.ui-sortable-helper").css({'top':e.pageY}); } 

Answer 4

这对我有用：

appendTo：’body’

像这样：

 $(this).draggable({ helper: "clone", cursor: "move", appendTo: 'body' });