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

Question

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

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

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

    console.log( e )

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

有任何想法吗？

Answer 1

在尝试了Amar的回答并意识到它搞砸了与之交互之后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,它会对你更有帮助.