Jquery UI Draggable:将辅助对象与鼠标位置对齐
Jquery UI Draggable:将辅助对象与鼠标位置对齐
提问于 2012-11-05 18:43:37
对于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 )但它不起作用，我猜这是因为我输入的值由于鼠标移动而被可拖动插件直接覆盖。
有什么想法吗？
回答 5
Stack Overflow用户
回答已采纳
发布于 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
Stack Overflow用户
发布于 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，它会对你更有帮助。
Stack Overflow用户
发布于 2015-01-03 09:22:26
我已经找到了一个解决这个问题的方法，它非常简单，如果你正在使用可排序插件，你可以像这样修复助手的位置：
sort: function(e, ui) {
$(".ui-sortable-handle.ui-sortable-helper").css({'top':e.pageY});
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/13230437
复制相关文章
相似问题
腾讯云开发者
