|
|
??? 譯者：
Flyingis
??? 終于完成了全文的翻譯，由于時(shí)間比較參促，文章沒有過多的校正與潤色，閱讀過程中難免會(huì)有些許生硬或不準(zhǔn)確的感覺，請(qǐng)大家見量并指出，方便他人閱讀。
??? 原文作者將拖放功能的實(shí)現(xiàn)分步講解，其核心的地方在于移動(dòng)和放置元素時(shí)，鼠標(biāo)、移動(dòng)元素、目標(biāo)元素關(guān)系的處理，只要這個(gè)問題處理好了，代碼就很容易理解，譯文僅供輔助參考之用。
??? 整合所有的功能
??? 最后我們使用所有代碼片斷，來創(chuàng)建一個(gè)完整的拖放函數(shù)腳本。我們所要做的第一件事情是DOM操作，如果你對(duì)此并不十分熟悉，可以閱讀《
JavaScript Primer on DOM Manipulation
》。
??? 接下來的代碼創(chuàng)建容器和容器組，使得在這些容器中可以拖動(dòng)每個(gè)元素，這在本文第二個(gè)demo的基礎(chǔ)上來完成。這段代碼能夠用來重新規(guī)劃元素的順序，將導(dǎo)航窗口放在頁面的左側(cè)或右側(cè)，或再加入你所能想到的其他的功能。
??? 我們將使用偽代碼來一步步進(jìn)行講解，將真實(shí)的代碼通過注釋的方式留給讀者查看。
??? 1.當(dāng)文檔第一次被加載時(shí)，我們創(chuàng)建一個(gè)名為dragHelper的DIV標(biāo)簽，當(dāng)我們開始移動(dòng)一個(gè)元素的時(shí)候，dragHelper將成為一個(gè)隱藏元素，可以四處移動(dòng)。真實(shí)的元素并不會(huì)被拖動(dòng)，僅僅使用insertBefore和appendChild來移動(dòng)。我們?cè)陂_始的時(shí)候隱藏dragHelper。
??? 2.我們創(chuàng)建mouseDown和mouseUp函數(shù)。起初，所有的這些函數(shù)都假設(shè)記錄了鼠標(biāo)按鈕的狀態(tài)，以至于iMouseDown變量在鼠標(biāo)按下的時(shí)候?yàn)閠rue，沒有按下的時(shí)候?yàn)閒alse。
??? 3.我們創(chuàng)建一個(gè)全局變量DragDrops，以及一個(gè)函數(shù)CreateDragContainer。DragDrops包含一組相互關(guān)聯(lián)的容器。傳入CreateDragContainer的任何變量（代表容器）被組織成一個(gè)新的集合，使元素能夠在這些容器間自由移動(dòng)。通過setAttribute，CreateDragContainer函數(shù)同樣將各容器中的元素綁定在一起。
??? 4.現(xiàn)在我們的代碼知道每個(gè)元素所在的集合，現(xiàn)在來看mouseMove函數(shù)。mouseMove函數(shù)首先設(shè)置了一個(gè)變量target，表示鼠標(biāo)下面的目標(biāo)元素，如果這個(gè)元素在集合（用getAttribute判斷）中就繼續(xù)下面操作：
??? 4.1.首先，在必要的時(shí)候，我們運(yùn)行一個(gè)簡單的腳本來改變目標(biāo)元素的class屬性，這樣就創(chuàng)造了一個(gè)翻動(dòng)的效果。
??? 4.2.然后我們檢查鼠標(biāo)是否點(diǎn)擊（因?yàn)槲覀兊拇a已經(jīng)運(yùn)行到這里），如果事件發(fā)生：
??? 4.2.1.設(shè)置變量curTarget為當(dāng)前元素。
??? 4.2.2.記錄元素當(dāng)前在文檔中的位置，以便在需要的時(shí)候可以將它的值取回。
??? 4.2.3.將當(dāng)前元素克隆到dragHelper，使得我們能夠移動(dòng)元素的隱藏備份。
??? 4.2.4.因?yàn)樵赿ragHelper中我們完全擁有了拖動(dòng)元素的一個(gè)備份，這個(gè)元素會(huì)始終在鼠標(biāo)下，我們必須移除dragObj屬性，讓代碼知道dragObj已不在集合中。
??? 4.2.5.我們快速記錄集合中每個(gè)元素當(dāng)前的位置、寬度和高度。當(dāng)元素第一次開始被拖動(dòng)時(shí)，我們僅需做一次這種工作，否則每當(dāng)鼠標(biāo)移動(dòng)的時(shí)候我們都必須做一次，甚至一秒內(nèi)幾百次。
??? 4.3.如果鼠標(biāo)沒有點(diǎn)擊，要么我們和之前擁有同樣的目標(biāo)元素，要么沒有目標(biāo)元素，不論哪種情況我們都不會(huì)做任何事情。
??? 5.現(xiàn)在我們檢查curTarget變量。curTarget應(yīng)該僅包含一個(gè)被拖動(dòng)的對(duì)象，因此如果它存在，表示我們正在拖動(dòng)一個(gè)元素：
??? 5.1.移動(dòng)隱藏DIV到鼠標(biāo)，這個(gè)元素和文章前面所創(chuàng)建的元素一樣能夠被拖動(dòng)。
??? 5.2.然后我們檢查鼠標(biāo)是否存在于當(dāng)前集合中每個(gè)容器中。
??? 5.2.1.如果鼠標(biāo)在某個(gè)容器中，我們檢查容器中的每個(gè)元素，查看我們正拖動(dòng)的元素屬于哪個(gè)位置。
??? 5.2.2.然后我們將所拖動(dòng)的元素放置在容器中另一個(gè)元素的前面，或容器的最后位置。
??? 5.2.3.最后我們確定元素可見。
??? 6.剩下的事情就是捕獲mouseUp事件：
??? 6.1.首先需要隱藏dragHelper：它不再被需要，因?yàn)槲覀儧]有拖動(dòng)任何東西。
??? 6.2.如果拖動(dòng)的元素是可見的，它已經(jīng)存在于任何它所屬的容器中，所有工作已完成。
??? 6.3.如果拖動(dòng)的元素不可見，我們將它放回它原來所在的地方。
//
?iMouseDown?represents?the?current?mouse?button?state:?up?or?down
/**/
/**/
/**/
/*
 lMouseState?represents?the?previous?mouse?button?state?so?that?we?can
check?for?button?clicks?and?button?releases:
if(iMouseDown?&&?!lMouseState)?//?button?just?clicked!
if(!iMouseDown?&&?lMouseState)?//?button?just?released!
*/
var
?mouseOffset?
=
?
null
;
var
?iMouseDown??
=
?
false
;
var
?lMouseState?
=
?
false
;
var
?dragObject??
=
?
null
;
//
?Demo?0?variables
var
?DragDrops???
=
?[];
var
?curTarget???
=
?
null
;
var
?lastTarget??
=
?
null
;
var
?dragHelper??
=
?
null
;
var
?tempDiv?????
=
?
null
;
var
?rootParent??
=
?
null
;
var
?rootSibling?
=
?
null
;
Number.prototype.NaN0
=
function
()
{
return
?isNaN(
this
)
?
0
:
this
;}
function
?CreateDragContainer()
{
  ??
/**/
/**/
/**/
/*
??Create?a?new?"Container?Instance"?so?that?items?from?one?"Set"?can?not
??be?dragged?into?items?from?another?"Set"
 ??
*/
??
var
?cDrag?
=
?DragDrops.length;
??DragDrops[cDrag]?
=
?[];
??
/**/
/**/
/**/
/*
??Each?item?passed?to?this?function?should?be?a?"container".??Store?each
??of?these?items?in?our?current?container
??
*/
??
for
(
var
?i
=
0
;?i
<
arguments.length;?i
++
)
{
????
var
?cObj?
=
?arguments[i];
????DragDrops[cDrag].push(cObj);
????cObj.setAttribute('DropObj',?cDrag);
????
/**/
/**/
/**/
/*
????Every?top?level?item?in?these?containers?should?be?draggable.??Do?this
????by?setting?the?DragObj?attribute?on?each?item?and?then?later?checking
????this?attribute?in?the?mouseMove?function
????
*/
????
for
(
var
?j
=
0
;?j
<
cObj.childNodes.length;?j
++
)
{
??????
//
?Firefox?puts?in?lots?of?#text?nodesskip?these
??????
if
(cObj.childNodes[j].nodeName
==
'#text')?
continue
;
??????cObj.childNodes[j].setAttribute('DragObj',?cDrag);
????}
??}
}
function
?mouseMove(ev)
{
????ev?
=
?ev?
||
?window.event;
????
/**/
/**/
/**/
/*
????We?are?setting?target?to?whatever?item?the?mouse?is?currently?on
????Firefox?uses?event.target?here,?MSIE?uses?event.srcElement
????
*/
????
var
?target?
=
?ev.target?
||
?ev.srcElement;
????
var
?mousePos?
=
?mouseCoords(ev);
????
//
?mouseOut?event?-?fires?if?the?item?the?mouse?is?on?has?changed
????
if
(lastTarget?
&&
?(target
!==
lastTarget))
{
??????
//
?reset?the?classname?for?the?target?element
??????
var
?origClass?
=
?lastTarget.getAttribute('origClass');
??????
if
(origClass)?lastTarget.className?
=
?origClass;
????}
????
/**/
/**/
/**/
/*
????dragObj?is?the?grouping?our?item?is?in?(set?from?the?createDragContainer?function).
????if?the?item?is?not?in?a?grouping?we?ignore?it?since?it?can't?be?dragged?with?this
????script.
????
*/
????
var
?dragObj?
=
?target.getAttribute('DragObj');
????
//
?if?the?mouse?was?moved?over?an?element?that?is?draggable
????
if
(dragObj
!=
null
)
{
??????
//
?mouseOver?event?-?Change?the?item's?class?if?necessary
??????
if
(target
!=
lastTarget)
{
????????
var
?oClass?
=
?target.getAttribute('overClass');
????????
if
(oClass)
{
??????????target.setAttribute('origClass',?target.className);
??????????target.className?
=
?oClass;
????????}
??????}
??????
//
?if?the?user?is?just?starting?to?drag?the?element
??????
if
(iMouseDown?
&&
?
!
lMouseState)
{
????????
//
?mouseDown?target
????????curTarget?
=
?target;
????????
//
?Record?the?mouse?x?and?y?offset?for?the?element
????????rootParent?
=
?curTarget.parentNode;
????????rootSibling?
=
?curTarget.nextSibling;
????????mouseOffset???
=
?getMouseOffset(target,?ev);
????????
//
?We?remove?anything?that?is?in?our?dragHelper?DIV?so?we?can?put?a?new?item?in?it.
????????
for
(
var
?i
=
0
;?i
<
dragHelper.childNodes.length;?i
++
)?dragHelper.removeChild(dragHelper.childNodes[i]);
????????
//
?Make?a?copy?of?the?current?item?and?put?it?in?our?drag?helper.
????????dragHelper.appendChild(curTarget.cloneNode(
true
));
????????dragHelper.style.display?
=
?'block';
????????
//
?set?the?class?on?our?helper?DIV?if?necessary
????????
var
?dragClass?
=
?curTarget.getAttribute('dragClass');
????????
if
(dragClass)
{
??????????dragHelper.firstChild.className?
=
?dragClass;
????????}
????????
//
?disable?dragging?from?our?helper?DIV?(it's?already?being?dragged)
????????dragHelper.firstChild.removeAttribute('DragObj');
????????
/**/
/**/
/**/
/*
????????Record?the?current?position?of?all?drag/drop?targets?related
????????to?the?element.??We?do?this?here?so?that?we?do?not?have?to?do
????????it?on?the?general?mouse?move?event?which?fires?when?the?mouse
????????moves?even?1?pixel.??If?we?don't?do?this?here?the?script
????????would?run?much?slower.
????????
*/
????????
var
?dragConts?
=
?DragDrops[dragObj];
????????
/**/
/**/
/**/
/*
????????first?record?the?width/height?of?our?drag?item.??Then?hide?it?since
????????it?is?going?to?(potentially)?be?moved?out?of?its?parent.
????????
*/
????????curTarget.setAttribute('startWidth',??parseInt(curTarget.offsetWidth));
????????curTarget.setAttribute('startHeight',?parseInt(curTarget.offsetHeight));
????????curTarget.style.display??
=
?'none';
????????
//
?loop?through?each?possible?drop?container
????????
for
(
var
?i
=
0
;?i
<
dragConts.length;?i
++
)
{
??????????
with
(dragConts[i])
{
????????????
var
?pos?
=
?getPosition(dragConts[i]);
????????????
/**/
/**/
/**/
/*
????????????save?the?width,?height?and?position?of?each?container.
????????????Even?though?we?are?saving?the?width?and?height?of?each
????????????container?back?to?the?container?this?is?much?faster?because
????????????we?are?saving?the?number?and?do?not?have?to?run?through
????????????any?calculations?again.??Also,?offsetHeight?and?offsetWidth
????????????are?both?fairly?slow.??You?would?never?normally?notice?any
????????????performance?hit?from?these?two?functions?but?our?code?is
????????????going?to?be?running?hundreds?of?times?each?second?so?every
????????????little?bit?helps!
????????????Note?that?the?biggest?performance?gain?here,?by?far,?comes
????????????from?not?having?to?run?through?the?getPosition?function
????????????hundreds?of?times.
????????????
*/
????????????setAttribute('startWidth',?parseInt(offsetWidth));
????????????setAttribute('startHeight',?parseInt(offsetHeight));
????????????setAttribute('startLeft',?pos.x);
????????????setAttribute('startTop',?pos.y);
??????????}
??????????
//
?loop?through?each?child?element?of?each?container
??????????
for
(
var
?j
=
0
;?j
<
dragConts[i].childNodes.length;?j
++
)
{
????????????
with
(dragConts[i].childNodes[j])
{
??????????????
if
((nodeName
==
'#text')?
||
?(dragConts[i].childNodes[j]
==
curTarget))?
continue
;
??????????????
var
?pos?
=
?getPosition(dragConts[i].childNodes[j]);
??????????????
//
?save?the?width,?height?and?position?of?each?element
??????????????setAttribute('startWidth',??parseInt(offsetWidth));
??????????????setAttribute('startHeight',?parseInt(offsetHeight));
??????????????setAttribute('startLeft',???pos.x);
??????????????setAttribute('startTop',????pos.y);
????????????}
??????????}
????????}
??????}
????}
????
//
?If?we?get?in?here?we?are?dragging?something
????
if
(curTarget)
{
??????
//
?move?our?helper?div?to?wherever?the?mouse?is?(adjusted?by?mouseOffset)
??????dragHelper.style.top??
=
?mousePos.y?
-
?mouseOffset.y;
??????dragHelper.style.left?
=
?mousePos.x?
-
?mouseOffset.x;
??????
var
?dragConts??
=
?DragDrops[curTarget.getAttribute('DragObj')];
??????
var
?activeCont?
=
?
null
;
??????
var
?xPos?
=
?mousePos.x?
-
?mouseOffset.x?
+
?(parseInt(curTarget.getAttribute('startWidth'))?
/
2
);
??????
var
?yPos?
=
?mousePos.y?
-
?mouseOffset.y?
+
?(parseInt(curTarget.getAttribute('startHeight'))
/
2
);
??????
//
?check?each?drop?container?to?see?if?our?target?object?is?"inside"?the?container
??????
for
(
var
?i
=
0
;?i
<
dragConts.length;?i
++
)
{
????????
with
(dragConts[i])
{
??????????
if
(((getAttribute('startLeft'))?
<
?xPos)?
&&
????????????((getAttribute('startTop'))?
<
?yPos)?
&&
????????????((getAttribute('startLeft')?
+
?getAttribute('startWidth'))?
>
?xPos)?
&&
????????????((getAttribute('startTop')??
+
?getAttribute('startHeight'))?
>
?yPos))
{
????????????
/**/
/**/
/**/
/*
????????????our?target?is?inside?of?our?container?so?save?the?container?into
????????????the?activeCont?variable?and?then?exit?the?loop?since?we?no?longer
????????????need?to?check?the?rest?of?the?containers
????????????
*/
????????????activeCont?
=
?dragConts[i];
????????????
//
?exit?the?for?loop
????????????
break
;
????????}
??????}
????}
????
//
?Our?target?object?is?in?one?of?our?containers.??Check?to?see?where?our?div?belongs
????
if
(activeCont)
{
??????
//
?beforeNode?will?hold?the?first?node?AFTER?where?our?div?belongs
??????
var
?beforeNode?
=
?
null
;
??????
//
?loop?through?each?child?node?(skipping?text?nodes).
??????
for
(
var
?i
=
activeCont.childNodes.length
-
1
;?i
>=
0
;?i
--
)
{
????????
with
(activeCont.childNodes[i])
{
??????????
if
(nodeName
==
'#text')?
continue
;
????????????
//
?if?the?current?item?is?"After"?the?item?being?dragged
????????????
if
(
??????????????curTarget?
!=
?activeCont.childNodes[i]?
&&
??????????????((getAttribute('startLeft')?
+
?getAttribute('startWidth'))?
>
?xPos)?
&&
??????????????((getAttribute('startTop')??
+
?getAttribute('startHeight'))?
>
?yPos))
{
????????????????beforeNode?
=
?activeCont.childNodes[i];
????????}
??????}
????}
????
//
?the?item?being?dragged?belongs?before?another?item
????
if
(beforeNode)
{
??????
if
(beforeNode
!=
curTarget.nextSibling)
{
????????activeCont.insertBefore(curTarget,?beforeNode);
??????}
????
//
?the?item?being?dragged?belongs?at?the?end?of?the?current?container
????}
?
else
?
{
??????
if
((curTarget.nextSibling)?
||
?(curTarget.parentNode
!=
activeCont))
{
????????activeCont.appendChild(curTarget);
??????}
????}
????
//
?make?our?drag?item?visible
????
if
(curTarget.style.display
!=
'')
{
??????curTarget.style.display??
=
?'';
????}
??}
?
else
?
{
????
//
?our?drag?item?is?not?in?a?container,?so?hide?it.
????
if
(curTarget.style.display
!=
'none')
{
??????curTarget.style.display??
=
?'none';
????}
??}
}
??
//
?track?the?current?mouse?state?so?we?can?compare?against?it?next?time
??lMouseState?
=
?iMouseDown;
??
//
?mouseMove?target
??lastTarget??
=
?target;
??
//
?track?the?current?mouse?state?so?we?can?compare?against?it?next?time
??lMouseState?
=
?iMouseDown;
??
//
?this?helps?prevent?items?on?the?page?from?being?highlighted?while?dragging
??
return
?
false
;
}
function
?mouseUp(ev)
{
??
if
(curTarget)
{
????
//
?hide?our?helper?object?-?it?is?no?longer?needed
????dragHelper.style.display?
=
?'none';
????
//
?if?the?drag?item?is?invisible?put?it?back?where?it?was?before?moving?it
????
if
(curTarget.style.display?
==
?'none')
{
??????
if
(rootSibling)
{
????????rootParent.insertBefore(curTarget,?rootSibling);
??????}
?
else
?
{
????????rootParent.appendChild(curTarget);
??????}
????}
????
//
?make?sure?the?drag?item?is?visible
????curTarget.style.display?
=
?'';
??}
??curTarget??
=
?
null
;
??iMouseDown?
=
?
false
;
}
function
?mouseDown()
{
??iMouseDown?
=
?
true
;
??
if
(lastTarget)
{
????
return
?
false
;
??}
}
document.onmousemove?
=
?mouseMove;
document.onmousedown?
=
?mouseDown;
document.onmouseup?
=
?mouseUp;
window.onload?
=
?
function
()
{
??
//
?Create?our?helper?object?that?will?show?the?item?while?dragging
??dragHelper?
=
?document.createElement('DIV');
??dragHelper.style.cssText?
=
?'position:absolute;display:none;';
????????
??CreateDragContainer(
????document.getElementById('DragContainer1'),
????document.getElementById('DragContainer2'),
????document.getElementById('DragContainer3')
??);
??document.body.appendChild(dragHelper);
}
<!--
?the?mouse?over?and?dragging?class?are?defined?on?each?item?
-->
?
<
div?
class?
="DragContainer"
?id
="DragContainer1"
>
??
<
div?
class
="DragBox"
?id
="Item1"
?overClass
="OverDragBox"
?dragClass
="DragDragBox"
>
Item?#1
</
div
>
??
<
div?
class
="DragBox"
?id
="Item2"
?overClass
="OverDragBox"
?dragClass
="DragDragBox"
>
Item?#2
</
div
>
??
<
div?
class
="DragBox"
?id
="Item3"
?overClass
="OverDragBox"
?dragClass
="DragDragBox"
>
Item?#3
</
div
>
??
<
div?
class
="DragBox"
?id
="Item4"
?overClass
="OverDragBox"
?dragClass
="DragDragBox"
>
Item?#4
</
div
>
?
</
div
>
<
div?
class
="DragContainer"
?id
="DragContainer2"
?
>
??
<
div?
class
="DragBox"
?id
="Item5"
?overClass
="OverDragBox"
?dragClass
="DragDragBox"
>
Item?#5
</
div
>
??
<
div?
class
="DragBox"
?id
="Item6"
?overClass
="OverDragBox"
?dragClass
="DragDragBox"
>
Item?#6
</
div
>
??
<
div?
class
="DragBox"
?id
="Item7"
?overClass
="OverDragBox"
?dragClass
="DragDragBox"
>
Item?#7
</
div
>
??
<
div?
class
="DragBox"
?id
="Item8"
?overClass
="OverDragBox"
?dragClass
="DragDragBox"
>
Item?#8
</
div
>
</
div
>
<
div?
class
="DragContainer"
?id
="DragContainer3"
>
??
<
div?
class
="DragBox"
?id
="Item9"
?overClass
="OverDragBox"
?dragClass
="DragDragBox"
>
Item?#9
</
div
>
??
<
div?
class
="DragBox"
?id
="Item10"
?overClass
="OverDragBox"
?dragClass
="DragDragBox"
>
Item?#10
</
div
>
??
<
div?
class
="DragBox"
?id
="Item11"
?overClass
="OverDragBox"
?dragClass
="DragDragBox"
>
Item?#11
</
div
>
??
<
div?
class
="DragBox"
?id
="Item12"
?overClass
="OverDragBox"
?dragClass
="DragDragBox"
>
Item?#12
</
div
>
</
div
>
??? 關(guān)于作者
??? Mark Kahn是一位Web Developer和DBA。可以通過這個(gè)網(wǎng)址跟他聯(lián)系：
http://www.jslibrary.org
??? 原文鏈接：
http://www.webreference.com/programming/javascript/mk/column2/3.html?
??? 另外兩篇：
[翻譯] 如何在 JavaScript 中實(shí)現(xiàn)拖放(上)
??
[翻譯] 如何在 JavaScript 中實(shí)現(xiàn)拖放(中)
|