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

问题描述

使用jQuery我有一个draggable元素。它是一个尺寸为200 x 40的div。
当然，用户可以通过点击div中的variuos位置来开始拖动这个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之后，帮助器的顶部和左边的值需要和鼠标x和y相同。我试过这个使用这个coffeescript代码：

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..

任何想法？

推荐答案

并且意识到它拧紧了与 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屋！