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

似乎我试图复制Jquery UI的可拖动函数已经证明了同时存在于两个位置的div的量子力学原理。制作我自己的“可拖动”功能

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

这里的的jsfiddle：

2011-11-23 user701510

我修正了自己的jsfiddle，给它一个去现在： http://jsfiddle.net/5Sxrq/2/ – sally

@sally：你确定你确实修复了它吗？我仍然与你的版本闪烁。编辑：没关系，我正在看错误的链接。 –

我修正了自己的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/

2011-11-23 11:38:57 sally

我发现只使用'$（'＃box'）。position（）'为我处理了保证金问题。 –

是的，但只要你的“盒子”不是子元素，否则它会给你'偏移量'和那个父元素而不是窗口...... – sally

啊，我想你有一点。我*想*我在我的版本中避免了这一点，但没有考虑它将如何转化为您的版本。再提醒一下，为什么我不能在凌晨4点左右回答SO问题。 –

你得到闪烁的原因是，你计算每次框内鼠标鼠标移动的偏移量。如果只计算onmousedown中的mouseOffX和mouseOffY一次，则不会使其闪烁。

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

我会尝试修复在我的版本怪异偏移的事情，但我不能给你任何保证 - 我容易入睡任何时候。

编辑：啊，修好了。这里是可用的版本：http://jsfiddle.net/7QzZM/

现在解释我做了什么：我们真的不关心鼠标在块位置

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

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

2011-11-23 11:31:04

看起来我不是凌晨4点以前唯一的一个。你的答案和Sally的答案都非常好，但Sally的解决方案对我的代码的更改很少。猜猜我以后会决定哪一个是答案。 – user701510

Sally的代码机会也不那么特别，因此可能需要较少的编辑才能呈现。 –

回答