|
|
??? 譯者：
Flyingis
??? 終于完成了全文的翻譯，由于時間比較參促，文章沒有過多的校正與潤色，閱讀過程中難免會有些許生硬或不準確的感覺，請大家見量并指出，方便他人閱讀。
??? 原文作者將拖放功能的實現分步講解，其核心的地方在于移動和放置元素時，鼠標、移動元素、目標元素關系的處理，只要這個問題處理好了，代碼就很容易理解，譯文僅供輔助參考之用。
??? 整合所有的功能
??? 最后我們使用所有代碼片斷，來創建一個完整的拖放函數腳本。我們所要做的第一件事情是DOM操作，如果你對此并不十分熟悉，可以閱讀《
JavaScript Primer on DOM Manipulation
》。
??? 接下來的代碼創建容器和容器組，使得在這些容器中可以拖動每個元素，這在本文第二個demo的基礎上來完成。這段代碼能夠用來重新規劃元素的順序，將導航窗口放在頁面的左側或右側，或再加入你所能想到的其他的功能。
??? 我們將使用偽代碼來一步步進行講解，將真實的代碼通過注釋的方式留給讀者查看。
??? 1.當文檔第一次被加載時，我們創建一個名為dragHelper的DIV標簽，當我們開始移動一個元素的時候，dragHelper將成為一個隱藏元素，可以四處移動。真實的元素并不會被拖動，僅僅使用insertBefore和appendChild來移動。我們在開始的時候隱藏dragHelper。
??? 2.我們創建mouseDown和mouseUp函數。起初，所有的這些函數都假設記錄了鼠標按鈕的狀態，以至于iMouseDown變量在鼠標按下的時候為true，沒有按下的時候為false。
??? 3.我們創建一個全局變量DragDrops，以及一個函數CreateDragContainer。DragDrops包含一組相互關聯的容器。傳入CreateDragContainer的任何變量（代表容器）被組織成一個新的集合，使元素能夠在這些容器間自由移動。通過setAttribute，CreateDragContainer函數同樣將各容器中的元素綁定在一起。
??? 4.現在我們的代碼知道每個元素所在的集合，現在來看mouseMove函數。mouseMove函數首先設置了一個變量target，表示鼠標下面的目標元素，如果這個元素在集合（用getAttribute判斷）中就繼續下面操作：
??? 4.1.首先，在必要的時候，我們運行一個簡單的腳本來改變目標元素的class屬性，這樣就創造了一個翻動的效果。
??? 4.2.然后我們檢查鼠標是否點擊（因為我們的代碼已經運行到這里），如果事件發生：
??? 4.2.1.設置變量curTarget為當前元素。
??? 4.2.2.記錄元素當前在文檔中的位置，以便在需要的時候可以將它的值取回。
??? 4.2.3.將當前元素克隆到dragHelper，使得我們能夠移動元素的隱藏備份。
??? 4.2.4.因為在dragHelper中我們完全擁有了拖動元素的一個備份，這個元素會始終在鼠標下，我們必須移除dragObj屬性，讓代碼知道dragObj已不在集合中。
??? 4.2.5.我們快速記錄集合中每個元素當前的位置、寬度和高度。當元素第一次開始被拖動時，我們僅需做一次這種工作，否則每當鼠標移動的時候我們都必須做一次，甚至一秒內幾百次。
??? 4.3.如果鼠標沒有點擊，要么我們和之前擁有同樣的目標元素，要么沒有目標元素，不論哪種情況我們都不會做任何事情。
??? 5.現在我們檢查curTarget變量。curTarget應該僅包含一個被拖動的對象，因此如果它存在，表示我們正在拖動一個元素：
??? 5.1.移動隱藏DIV到鼠標，這個元素和文章前面所創建的元素一樣能夠被拖動。
??? 5.2.然后我們檢查鼠標是否存在于當前集合中每個容器中。
??? 5.2.1.如果鼠標在某個容器中，我們檢查容器中的每個元素，查看我們正拖動的元素屬于哪個位置。
??? 5.2.2.然后我們將所拖動的元素放置在容器中另一個元素的前面，或容器的最后位置。
??? 5.2.3.最后我們確定元素可見。
??? 6.剩下的事情就是捕獲mouseUp事件：
??? 6.1.首先需要隱藏dragHelper：它不再被需要，因為我們沒有拖動任何東西。
??? 6.2.如果拖動的元素是可見的，它已經存在于任何它所屬的容器中，所有工作已完成。
??? 6.3.如果拖動的元素不可見，我們將它放回它原來所在的地方。
//
?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
>
??? 關于作者
??? Mark Kahn是一位Web Developer和DBA。可以通過這個網址跟他聯系：
http://www.jslibrary.org
??? 原文鏈接：
http://www.webreference.com/programming/javascript/mk/column2/3.html?
??? 另外兩篇：
[翻譯] 如何在 JavaScript 中實現拖放(上)
??
[翻譯] 如何在 JavaScript 中實現拖放(中)
|