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

Question

似乎我試圖復制Jquery UI的可拖動函數的嘗試證明了div的Quantum Mechanics原理同時存在於兩個地方。

當我將鼠標放在盒子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;

當mousedown事件被調用時，你應該得到mouseOffX和mouseOffY ，而不是每次使用mousemove

編輯：這個是固定保證金問題： http ： //jsfiddle.net/5Sxrq/3/

Answer 2

閃爍的原因是你每次鼠標移動時都會計算鼠標在盒子里的偏移量。 如果你只是在onmousedown計算一次mouseOffX和mouseOffY ，你就不會閃爍。

這是一個修改過的版本。 它仍有一些問題，但沒有閃爍： http ： //jsfiddle.net/RzqQE/

我將嘗試在我的版本中修復奇怪的偏移量，但我不能給你任何保證 - 我隨時都可能睡着了。

編輯：啊，修好了。 這是一個有效的版本： http ： //jsfiddle.net/7QzZM/

現在來解釋一下我做了什么：

我們並不關心鼠標在塊中的位置。 我們關心的是每次鼠標移動時移動塊的數量。 我們可以通過獲取鼠標位置的增量（我的代碼中的dx和dy ）來解決這個問題。 為了獲得塊的新位置，我們只需將增量添加到其舊位置。

另一個區別是我使用$('#box').position()而不是$('#box').offset() ; 這將返回相對於框的父級而不是相對於文檔的位置。