Jquery UI Draggable：将助手对齐到鼠标位置答案

【问题标题】：Jquery UI Draggable: Align helper to mouse positionJquery UI Draggable：将助手对齐到鼠标位置
【发布时间】：2012-10-25 04:33:57
【问题描述】：

使用 jQuery，我有一个可拖动的元素。这是一个大小为 200 x 40 的 div。当然，用户可以通过点击 div 中的不同位置来开始拖动这个 div。我想要的是当 startdrag 事件发生时，帮助器（克隆）div 将始终以相同的方式与光标对齐，无论用户在 div 中的哪个位置开始拖动。

所以在 mousedown 之后，助手的 top 和 left 值需要与鼠标 x 和 y 相同。我用这个咖啡脚本代码试过这个：

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

    console.log( e )

但这不起作用，我猜这是因为我输入的值由于鼠标移动而直接被可拖动插件覆盖..

有什么想法吗？

【问题讨论】：

你应该设置一个 jsfiddle 让我们看看发生了什么

标签： javascript jquery coffeescript draggable

【解决方案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

【讨论】：

你完全正确！ (jsfiddle.net/vLmN5)，这个内置方法比在start函数中自己做要好。
谢谢，你是救命稻草！
感激不尽。这个辅助元素的定位困扰了我很长时间。谢谢！

【解决方案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，对你会更有帮助。

【讨论】：

几乎！但是左边距/顶部而不是左边/顶部完成了这项工作。这对我来说是这样的：marginLeft: e.clientX - $(e.target).offset().left 和 marginTop: e.clientY - $(e.target).offset().top.. 如果你可以编辑你的帖子，我接受它.. 谢谢！

【解决方案3】：

我已经找到了解决这个问题的方法，而且非常简单，如果您使用可排序插件，您可以像这样修复助手位置：

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

【讨论】：

【解决方案4】：

我同意@roverv。

这对我来说很好用。

$('.js-tire').draggable
      tolerance: 'fit',
      appendTo: 'body',
      cursor: 'move',
      cursorAt:
        top: 15,
        left: 18
      helper: (event) ->
        $('<div class="tire-icon"></div>').append($('<img src="/images/tyre_32_32.png" />'))
      start: (event, ui) ->
        if $(event.target).hasClass 'in-use'
          $('.js-send-to-maintenance-box').addClass 'is-highlighted'
        else
          $('.ui-droppable').addClass 'is-highlighted'
      stop: (event, ui) ->
        $('.ui-droppable')
          .removeClass 'is-highlighted'
          .removeClass 'is-dragover'

【讨论】：

【解决方案5】：

这对我有用：

appendTo: '正文'

像这样：

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

【讨论】：