制作我自己的“可拖动”功能

Posted 2023-05-08

【中文标题】制作我自己的“可拖动”功能

【英文标题】：Making my own "draggable" function

【发布时间】：2012-01-04 16:28:38

【问题描述】：

看来我试图复制 Jquery UI 的可拖动功能的尝试已经证明了 div 同时存在于两个地方的量子力学原理。

当我在 box div 上按住鼠标并移动鼠标光标时，box div 开始疯狂地闪烁，并且 box div 的“克隆”出现在原始 box div 的东南部，它也在闪烁。

这是 jsfiddle：

jsfiddle

【问题讨论】：

我已经修复了你的 jsfiddle，现在试试吧：jsfiddle.net/5Sxrq/2

@sally：你确定你真的修好了它吗？我的版本仍然闪烁。编辑：没关系，我看错了链接。

【参考方案1】：

我已经修复了你的 jsfiddle，现在试试吧： http://jsfiddle.net/5Sxrq/2/

问题是：

margin-top:100px;
margin-left:80px;

如果你想使用边距，那么你必须从偏移量中减去它

boxOff = $('#box').offset();
mouseOffX = e.pageX - boxOff.left;
mouseOffY = e.pageY - boxOff.top;

当mousedown 事件被调用时，你应该得到mouseOffX 和mouseOffY，而不是每次都使用mousemove

编辑： 这个是固定保证金问题： http://jsfiddle.net/5Sxrq/3/

【讨论】：

我发现只使用$('#box').position() 就为我解决了边距问题。

是的，但只要你的box 不是子元素，否则它会给你offsets wrt 到那个父元素而不是窗口......

啊，我觉得你说得有道理。我认为我在我的版本中避免了这种情况，但没有考虑如何将其转化为您的版本。再次提醒我为什么我不应该在凌晨 4 点左右回答 SO 问题。

修复 margin 问题我在这里更新了 jdfiddle：jsfiddle.net/5Sxrq/3

我怀疑这是因为$('#box').offset()（与$('#box').position()相比）。前者返回相对于文档的位置，而后者返回相对于元素父级的位置。

【参考方案2】：

闪烁的原因是每次鼠标移动时您都在计算鼠标在框内的偏移量。如果在onmousedown 中只计算一次mouseOffX 和mouseOffY，就不会出现闪烁。

这是修改后的版本。它仍然有一些问题，但没有闪烁：http://jsfiddle.net/RzqQE/

我将尝试修复我的版本中奇怪的偏移问题，但我不能给你任何保证——我随时可能会睡着。

编辑：啊，修好了。这是一个有效的版本：http://jsfiddle.net/7QzZM/

现在解释一下我做了什么：

我们并不真正关心鼠标在块中的位置。我们关心的是每次鼠标移动时要移动多少块。我们可以通过获取鼠标位置的增量（我的代码中的dx 和dy）来解决这个问题。为了获得块的新位置，我们只需将增量添加到它的旧位置。

另一个区别是我使用了$('#box').position() 而不是$('#box').offset()；这将返回相对于框的父级而不是相对于文档的位置。

【讨论】：

看来我不是唯一一个凌晨 4 点起床的人。您的答案和 Sally 的答案都很好，但是 Sally 的解决方案涉及对我的代码的更改较少。猜猜我稍后会决定哪个是答案。

可能 Sally 的代码也不太特别，因此可能需要较少的编辑才能呈现。