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 ) 

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

有任何想法吗?

在尝试了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

尝试这样设置,

  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 ,它会对你更有帮助。

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

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

这对我有用:

appendTo:’body’

像这样:

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