Javascript “做我自己的”；“可拖动的”；功能

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

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

以下是JSFIDLE：

---

之所以会闪烁，是因为每次鼠标移动时，都在计算框内鼠标的偏移量。如果您只需在mousedown上计算一次

mouseOffX

和

mouseOffY

，它就不会闪烁

这是一个修改过的版本。它仍然存在一些问题，但没有闪烁：

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

编辑：啊，修好了。以下是一个有效的版本：

现在来解释我做了什么：

我们并不真正关心鼠标在块中的位置。我们关心的是每次鼠标移动块的移动量。我们可以通过获取鼠标位置的增量（

dx

和

dy

在我的代码中）来解决这个问题。要获得块的新位置，我们只需将增量添加到其旧位置

---

另一个不同之处是我使用了

$（'#box'）.position（）

而不是

$（'#box'）.offset（）

；这将返回相对于长方体父对象的位置，而不是相对于文档的位置。

我已经修复了您的JSFIDLE，现在开始：

这些问题是：

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

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

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

调用

mousedown

事件时，您应该获得

mouseOffX

和

mouseOffY

，而不是每次使用

mousemove

编辑： 这是一个固定保证金问题：

---

我已经修好了你的jsfiddle，现在就动手吧：@sally:你确定你真的修好了吗？你的版本还是一样。编辑：没关系，我看错了链接。我发现仅仅使用

$（“#box”）.position（）

就解决了我的边距问题。是的，但只要你的

框

不是子元素，否则它会给你

偏移量
wrt到父元素而不是窗口…啊，我想你有道理。我想我在我的版本中避免了这一点，但没有考虑它会怎样翻译成你的。又一次提醒我为什么不应该在早上4点左右回答这么多问题。为了解决
边距
问题，我在这里更新了jFIDLE：我怀疑这是因为
$（'#box'）.offset（）
（与
$（'#box'）.position（）相比）。前者返回相对于文档的位置，而后者返回相对于元素父元素的位置。您的答案和Sally的答案都很好，但Sally的解决方案对我的代码的更改较少。我想我稍后会决定哪一个是答案。Sally的代码可能也不太特别，因此可能需要较少的编辑才能呈现出来。