Jquery UI Draggable:将助手对齐到鼠标位置 [英] Jquery UI Draggable: Align helper to mouse position

问题描述

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

With jQuery I have a draggable element. It's a div with a size of 200 x 40. Of course the user can start dragging this div by clicking at variuos positions in the div. What I want is when the startdrag event happens, the helper (clone) div will always be aligned to the cursor the same way, no matter where in the div the user started dragging.

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

So after the mousedown the helper's top and left values need to be the same as the mouses x and y. I've tried this using this coffeescript code:

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

    console.log( e )

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

But it doesn't work and my guess is that this is happening because the values I put in are directly overwritten by the draggable plugin because of mouse movement..

有什么想法吗?

推荐答案

在尝试了 Amar 的答案后，发现它搞砸了与 droppable 的交互，我深入挖掘，发现有一个专门的选项支持这个称为 cursorAt.

After trying Amar's answer and realizing that it screws up interactions with droppable, I dug deeper, and found that there is an option specifically to support this called cursorAt.

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

这会将助手的左上角放置在光标左上方 5 个像素处，并与 droppable 正确交互.

This places the top-left corner of the helper 5 pixels above and to the left of the cursor, and interacts correctly with droppable.

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

让我们在应得的地方给予信任.谢谢，jquery-ui 邮件列表存档！

And let's give credit where credit is due. Thanks, jquery-ui mailing list archives!

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

这篇关于Jquery UI Draggable:将助手对齐到鼠标位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！