製作我自己的「可拖動」功能

似乎我試圖複製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的代碼機會也不那麼特別，因此可能需要較少的編輯才能呈現。 –

回答