对于jQuery,我有一个可拖动的元素。它是一个200x40大小的div。当然,用户可以通过单击div中的各种位置来开始拖动此div。我想要的是,当startdrag事件发生时,无论用户在div中的哪个位置开始拖动,helper (克隆) div都将始终以相同的方式与光标对齐。
所以在鼠标按下后,辅助对象的顶部和左侧的值需要与鼠标的x和y相同。我已经使用下面的coffeescript代码尝试过:
onStartDrag: ( e, ui ) =>
ui.helper.css
left: e.clientX
top: e.clientY
console.log( e )
但它不起作用,我猜这是因为我输入的值由于鼠标移动而被可拖动插件直接覆盖。
有什么想法吗?
发布于 2013-09-26 06:53:35
在尝试了阿马尔的答案并意识到它搞砸了与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
发布于 2012-11-05 21:38:29
试着这样设置,
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,它会对你更有帮助。
发布于 2015-01-03 09:22:26
我已经找到了一个解决这个问题的方法,它非常简单,如果你正在使用可排序插件,你可以像这样修复助手的位置:
sort: function(e, ui) {
$(".ui-sortable-handle.ui-sortable-helper").css({'top':e.pageY});
}
https://stackoverflow.com/questions/13230437
复制相似问题