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

Question

我试图复制Jquery UI的可拖动函数似乎已经证明了div的量子力学原理同时存在于两个地方。

当我将鼠标放在盒子div上并移动鼠标光标时，盒子div开始像疯了一样闪烁，盒子div的“克隆”出现在原始盒子div的东南方，它也在闪烁。

这是jsfiddle：

jsfiddle

Answer 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;

调用mouseOffX事件时，您应该获得mouseOffY和mousedown，而不是每次都使用mousemove

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

Answer 2

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

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

我打算在我的版本中修复奇怪的偏移量，但我不能给你任何保证 - 我随时都可能睡着了。

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

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

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

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