制作我自己的"可拖动"功能

Question

似乎我试图复制Jquery UI的可拖动函数的尝试证明了div的Quantum Mechanics原理同时存在于两个地方.

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

这是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(); 这将返回相对于框的父级而不是相对于文档的位置.