Flyingis

??? 譯者： Flyingis?

??? 上一篇文章 介紹了移動(dòng)頁(yè)面元素所涉及到的捕獲鼠標(biāo)移動(dòng)和鼠標(biāo)點(diǎn)擊的相關(guān)問(wèn)題，本段文章將介紹如何移動(dòng)和放置頁(yè)面元素。

??? 移動(dòng)元素

??? 我們現(xiàn)在已經(jīng)知道如何捕獲鼠標(biāo)移動(dòng)和點(diǎn)擊。接下來(lái)需要做的就是移動(dòng)任何我們想拖動(dòng)的元素。首先，將一個(gè)元素準(zhǔn)確移動(dòng)到頁(yè)面上我們想要的位置，該元素樣式表的position值必須為absolute，這意味著你可以設(shè)置它的style.top或style.left，測(cè)量值相對(duì)于頁(yè)面的左上角，因?yàn)槲覀兯械氖髽?biāo)移動(dòng)都是相對(duì)于頁(yè)面左上角的，通常都是這樣。

??? 一旦我們?cè)O(shè)置了item.style.position='absolute'，接下來(lái)就需要改變?cè)撛豻op和left的位置，使它移動(dòng)！

document.onmousemove? = ?mouseMove;
document.onmouseup??? = ?mouseUp;

var ?dragObject?? = ? null ;
var ?mouseOffset? = ? null ;

function ?getMouseOffset(target,?ev)? {
??ev? = ?ev? || ?window.event;

?? var ?docPos? = ?getPosition(target);
?? var ?mousePos? = ?mouseCoords(ev);

??? return ? {x:mousePos.x? - ?docPos.x,?y:mousePos.y? - ?docPos.y} ;
}

function ?getPosition(e)? {
?? var ?left? = ? 0 ;
?? var ?top?? = ? 0 ;

?? while ?(e.offsetParent) {
????left? += ?e.offsetLeft;
????top? += ?e.offsetTop;
????e? = ?e.offsetParent;
??}

??left? += ?e.offsetLeft;
??top? += ?e.offsetTop;

?? return ? {x:left,?y:top} ;
}

function ?mouseMove(ev)? {
??ev? = ?ev? || ?window.event;
?? var ?mousePos? = ?mouseCoords(ev);

?? if ?(dragObject)? {
????dragObject.style.position? = ?'absolute';
????dragObject.style.top? = ?mousePos.y? - ?mouseOffset.y;
????dragObject.style.left? = ?mousePos.x? - ?mouseOffset.x;
???? return ? false ;
??}
}

function ?mouseUp()? {
??dragObject? = ? null ;
}

function ?makeDraggable(item)? {
?? if ?( ! item)? return ;
??item.onmousedown? = ? function (ev)? {
????dragObject?? = ? this ;
????mouseOffset? = ?getMouseOffset( this ,?ev);
???? return ? false ;
??}
}

??? 你會(huì)注意到這些代碼是以我們前面的例子為基礎(chǔ)的（參考上篇文章），將它們放置在一起，你將能夠隨意的去移動(dòng)元素。

??? 當(dāng)我們點(diǎn)擊一個(gè)元素時(shí)，存儲(chǔ)了另外的一個(gè)變量，mouseOffset。mouseOffset簡(jiǎn)單的包含了我們點(diǎn)擊元素的位置信息。如果我們有一張20*20px的圖像，然后點(diǎn)擊圖像的中間，mouseOffset應(yīng)該是{x:10, y:10}。如果我們點(diǎn)擊圖像的左上角，mouseOffset應(yīng)為{x:0, y:0}。我們?cè)谑髽?biāo)移動(dòng)后的位置信息中用到它。如果我們沒(méi)有存儲(chǔ)這個(gè)值，不論你點(diǎn)擊元素的哪一個(gè)位置，元素相對(duì)于鼠標(biāo)的位置都將會(huì)是相同的。

??? mouseOffset函數(shù)用到了另外一個(gè)函數(shù)getPosition。getPosition目的是返回元素相對(duì)于documemt文檔的坐標(biāo)位置。如果我們簡(jiǎn)單的去讀取item.offsetLeft或item.style.left，得到的將是元素相對(duì)于它父元素的位置，而不是document文檔的。在我們的腳本中，所有的元素都是相對(duì)于document文檔的，因此需要這樣做。

??? 要完成獲取元素相對(duì)于document文檔位置的工作，getPosition從它自身的父級(jí)開(kāi)始，循環(huán)獲取它的left和top的值并累加，這樣我們就得到了我們想要的元素距文檔頂部和左側(cè)的累計(jì)值。

??? 當(dāng)我們獲取了這條信息并移動(dòng)鼠標(biāo)的時(shí)候，mouseMove開(kāi)始運(yùn)行。首先我們需要保證item.style.position值為absolute，接著，我們將元素移動(dòng)到任何一個(gè)地方，鼠標(biāo)位置都會(huì)減去我們之前記錄的鼠標(biāo)相對(duì)于元素的偏移量。當(dāng)鼠標(biāo)釋放時(shí)，dragObject將被設(shè)置為null，并且mouseMove函數(shù)不再做任何事情。

??? 放置元素

??? 我們前面的例子已經(jīng)處理了這個(gè)問(wèn)題，僅僅是拖動(dòng)一個(gè)元素，然后將它放下。然后，在我們放下元素的時(shí)候通常還有其他的目的，我們以拖動(dòng)元素到垃圾回收站為例，或我們可能想讓該元素和頁(yè)面中某個(gè)特定的區(qū)域?qū)R。

??? 不幸的是我們?cè)谶@里進(jìn)入了一個(gè)相對(duì)主要的問(wèn)題。因?yàn)槲覀冋谝苿?dòng)的元素總是直接處于我們的鼠標(biāo)下，而不可能去引發(fā)mouseover、mousedown、mouseup或鼠標(biāo)對(duì)頁(yè)面中其他元素的操作。如果你移動(dòng)一個(gè)元素到垃圾回收站，你的鼠標(biāo)會(huì)一直在移動(dòng)元素的上方，而不是垃圾回收站。

??? 那么我們?cè)撊绾翁幚磉@個(gè)問(wèn)題呢？這里有幾種解決方案。在前面所提到的mouseOffset的目的是保證元素總是在鼠標(biāo)下方正確的位置，如果你忽視了這點(diǎn)，然后總是使得元素在鼠標(biāo)的右下方，你的鼠標(biāo)將不會(huì)被你正在拖動(dòng)的元素所隱藏，我們也不會(huì)碰到問(wèn)題。但事實(shí)上往往不會(huì)這樣，為了美觀我們通常要保持元素在鼠標(biāo)的下方。

??? 另外一種選擇是不移動(dòng)你正在拖動(dòng)的元素，你可以改變鼠標(biāo)樣式，來(lái)告訴使用者你正在拖動(dòng)一個(gè)元素，直到你將它放置到某個(gè)地方。這解決了我們的問(wèn)題，但是帶來(lái)了和前面一種方案面臨的同樣問(wèn)題：美觀。

??? 我們最后的一種解決方案既不影響你正在移動(dòng)的元素，也不影響移動(dòng)終點(diǎn)位置上的元素（例如垃圾回收站）。不幸的是，這比前面兩種解決方案的難度更大。我們將要做的是獲得一組我們要放置的目標(biāo)，當(dāng)鼠標(biāo)釋放時(shí)，我們手工檢查當(dāng)前鼠標(biāo)相對(duì)于每個(gè)目標(biāo)的位置，看鼠標(biāo)是否釋放在這個(gè)目標(biāo)中某一個(gè)目標(biāo)的位置上，如果是的，我們就知道我們已經(jīng)將元素放置在我們的目標(biāo)上了。

/**/ /*
All?code?from?the?previous?example?is?needed?with?the?exception
of?the?mouseUp?function?which?is?replaced?below
*/

var ?dropTargets? = ?[];

function ?addDropTarget(dropTarget)? {
??dropTargets.push(dropTarget);
}

function ?mouseUp(ev)? {
??ev? = ?ev? || ?window.event;
?? var ?mousePos? = ?mouseCoords(ev);

?? for ?( var ?i = 0 ;?i < dropTargets.length;?i ++ )? {
???? var ?curTarget? = ?dropTargets[i];
???? var ?targPos? = ?getPosition(curTarget);
???? var ?targWidth? = ?parseInt(curTarget.offsetWidth);
???? var ?targHeight? = ?parseInt(curTarget.offsetHeight);

???? if ?(
??????(mousePos.x? > ?targPos.x)? && ?
??????(mousePos.x? < ?(targPos.x? + ?targWidth))? && ?
??????(mousePos.y? > ?targPos.y)? && ?
??????(mousePos.y? < ?(targPos.y? + ?targHeight)))? {
?????? // ?dragObject?was?dropped?onto?curTarget!
??????}
??}

??dragObject??? = ? null ;
}

??? 這個(gè)例子中當(dāng)鼠標(biāo)釋放時(shí)，我們循環(huán)每個(gè)可能放置元素的目標(biāo)，如果鼠標(biāo)指針在目標(biāo)上，我們則擁有了一個(gè)放置元素的事件，通過(guò)鼠標(biāo)橫坐標(biāo)大于目標(biāo)元素左側(cè)橫坐標(biāo)（mousePos.x>targPos.x），小于目標(biāo)元素右側(cè)橫坐標(biāo)（mousePos.x<(targPos.x+targWidth)）來(lái)判定，對(duì)于Y坐標(biāo)我們做同樣的判斷。如果所有的這些值都返回true，那么我們的鼠標(biāo)就是在目標(biāo)元素的范圍內(nèi)。

??? 原文鏈接：http://www.webreference.com/programming/javascript/mk/column2/2.html

??? 另外兩篇：[翻譯] 如何在 JavaScript 中實(shí)現(xiàn)拖放(上)?? [翻譯] 如何在 JavaScript 中實(shí)現(xiàn)拖放(下)