首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >Jquery UI Draggable:将辅助对象与鼠标位置对齐

Jquery UI Draggable:将辅助对象与鼠标位置对齐
EN

Stack Overflow用户
提问于 2012-11-05 18:43:37
回答 5查看 32K关注 0票数 17

对于jQuery,我有一个可拖动的元素。它是一个200x40大小的div。当然,用户可以通过单击div中的各种位置来开始拖动此div。我想要的是,当startdrag事件发生时,无论用户在div中的哪个位置开始拖动,helper (克隆) div都将始终以相同的方式与光标对齐。

所以在鼠标按下后,辅助对象的顶部和左侧的值需要与鼠标的x和y相同。我已经使用下面的coffeescript代码尝试过:

代码语言:javascript
复制
onStartDrag: ( e, ui ) =>
    ui.helper.css
        left: e.clientX
        top: e.clientY

    console.log( e )

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

有什么想法吗?

EN

回答 5

Stack Overflow用户

回答已采纳

发布于 2013-09-26 06:53:35

在尝试了阿马尔的答案并意识到它搞砸了与droppable的交互后,我深入挖掘,发现有一个专门支持这一点的选项,称为cursorAt

代码语言:javascript
复制
$('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

票数 39
EN

Stack Overflow用户

发布于 2012-11-05 21:38:29

试着这样设置,

代码语言:javascript
复制
       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,它会对你更有帮助。

票数 15
EN

Stack Overflow用户

发布于 2015-01-03 09:22:26

我已经找到了一个解决这个问题的方法,它非常简单,如果你正在使用可排序插件,你可以像这样修复助手的位置:

代码语言:javascript
复制
sort: function(e, ui) {
    $(".ui-sortable-handle.ui-sortable-helper").css({'top':e.pageY});
}
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/13230437

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档