RT，拖動(dòng)可能是時(shí)下比較流行的一個(gè)js效果之一,在感嘆創(chuàng)造者的神奇之外，我懷作好奇，也來(lái)嘗試了一把(當(dāng)然，是在欣賞了不少拖動(dòng)代碼的基礎(chǔ)上，并妄想通過(guò)最簡(jiǎn)單的辦法實(shí)現(xiàn))。

其實(shí)，拖動(dòng)特效可以由3個(gè)主要部分組成，開始拖動(dòng)，拖動(dòng)，結(jié)束拖動(dòng)。

哎，不說(shuō)這么多了（攝影的朋友肯定要說(shuō)， 怎么還不上圖了...呵呵）,好，我就來(lái)點(diǎn)代碼吧。

開始拖動(dòng)之前，先上2個(gè)簡(jiǎn)單的工具方法：

比較簡(jiǎn)單，相信大家看完注釋都能明白。
?

? 1 ??? var ??Utils?? = ???? {
? 2 ????? " ?getTarget? " ?:? function ?(ev)?? {
? 3 ????????? // ??獲得當(dāng)前的目標(biāo)源對(duì)象?
? 4 ?????????ev?? = ??ev?? || ??window.event;
? 5 ????????? var ??tget?? = ??ev.target?? || ??ev.srcElement;
? 6 ????????? return ??tget;
? 7 ???} ?,
? 8 ????? " ?getPosition? " ?:? function ?(ev)?? {
? 9 ????????? // ??設(shè)置坐標(biāo)?
10 ?????????? // ??模擬一個(gè)鼠標(biāo)跟隨的效果?
11 ?????????ev?? = ??ev?? || ??window.event;
12 ?????????? return ???? {top:document.body.scrollTop?? + ??ev.clientY?? + ??? 10 ?,
13 ????????????????????????left:document.body.scrollLeft?? + ??ev.clientX?? + ??? 10 ?} ?;
14 ???} ?
15 ?} ?

下面，開始本章的重要部分，拖動(dòng)。還是先看代碼吧：
<div id="container1" container="true" style="width:200px;height:300px;background-color:FFFff2;float:left"> <div id="test1" dragable="true" style="width:200px;background-color:FF00F0;cursor:pointer" >111</div> <div id="test2" dragable="true" style="width:200px;background-color:FFAAF0;cursor:pointer">222</div> <div id="test3" dragable="true" style="width:200px;background-color:FF76AF;cursor:pointer">333</div> <div id="test4" dragable="true" style="width:200px;background-color:FFA770;cursor:pointer">444</div> <div id="test5" dragable="true" style="width:200px;background-color:a90aF0;cursor:pointer">555</div> </div> <div id="container3" align="center" style="width:100px;height:300px;float:left"> ? </div> <div id="container2" container="true" style="width:200px;height:300px;background-color:FFFff2;float:left"> <div id="test6" dragable="true" style="width:200px;background-color:b22002;cursor:pointer" >666</div> <div id="test7" dragable="true" style="width:200px;background-color:b2FF02;cursor:pointer">777</div> <div id="test8" dragable="true" style="width:200px;background-color:b2AA02;cursor:pointer">888</div> <div id="test9" dragable="true" style="width:200px;background-color:b2BBC2;cursor:pointer">999</div> <div id="test10" dragable="true" style="width:200px;background-color:b22AAA;cursor:pointer">1010</div> </div> <script language="javascript"> var Drag = { "moveDiv":null, "dragObj":null, "draging":false, "start":function(ev){ Drag.dragObj = Utils.getTarget(ev); if(Drag.isdragable()){ Drag.createDiv(); Drag.draging = false; } return false; }, "draging":function(ev){ if(!Drag.isdragable() || Drag.moveDiv == null){ return; } // 設(shè)置被選定對(duì)象的鼠標(biāo)跟隨效果 if(!Drag.draging){ var move = Drag.dragObj.cloneNode(true); Drag.moveDiv.appendChild(move); } Drag.moveDiv.style.top = (Utils.getPosition(ev)).top; Drag.moveDiv.style.left = (Utils.getPosition(ev)).left; // 使用DOM操作，替換拖動(dòng)過(guò)程中元素的位置 var mouseOverObj = Utils.getTarget(ev); if(mouseOverObj.getAttribute("dragable") || mouseOverObj.getAttribute("container")){ if(Drag.dragObj.parentNode != mouseOverObj.parentNode){ if(mouseOverObj.nextSibling){ mouseOverObj.parentNode.insertBefore(Drag.dragObj,mouseOverObj); }else{ mouseOverObj.parentNode.appendChild(Drag.dragObj); } }else{ if(mouseOverObj.nextSibling){ Drag.dragObj.parentNode.insertBefore(Drag.dragObj,mouseOverObj); }else{ Drag.dragObj.parentNode.appendChild(Drag.dragObj); } } } // 設(shè)置狀態(tài)為拖動(dòng)中 Drag.draging = true; return false; }, "end":function(){ Drag.dragObj = null; Drag.removeDiv(); Drag.draging = false; return false; }, "removeDiv":function(){ // 移除拖動(dòng)時(shí)跟隨鼠標(biāo)移動(dòng)的虛擬DIV層 if(Drag.moveDiv != null){ Drag.moveDiv.style.display = "none"; Drag.moveDiv.parentNode.removeChild(Drag.moveDiv); Drag.moveDiv = null; } }, "createDiv":function(){ // 初始化拖動(dòng)時(shí)跟隨鼠標(biāo)移動(dòng)的虛擬DIV層 Drag.removeDiv(); Drag.moveDiv = document.createElement("div"); Drag.moveDiv.style.cssText = "position:absolute;z-index:10;"; document.body.appendChild(Drag.moveDiv); }, "isdragable":function(){ // 驗(yàn)證當(dāng)前對(duì)象是否為可拖動(dòng)的對(duì)象 if(Drag.dragObj == null || !Drag.dragObj.getAttribute("dragable")){ return false; } return true; } } var Utils = { "getTarget":function(ev){ // 獲得當(dāng)前的目標(biāo)源對(duì)象 ev = ev || window.event; var tget = ev.target || ev.srcElement; return tget; }, "getPosition":function(ev){ // 設(shè)置坐標(biāo) // 模擬一個(gè)鼠標(biāo)跟隨的效果 ev = ev || window.event; return {top:document.body.scrollTop + ev.clientY + 10, left:document.body.scrollLeft + ev.clientX + 10}; } } document.onmousemove = Drag.draging; document.onmouseup = Drag.end; document.onmousedown = Drag.start; </script>
（如果你想看到深動(dòng)的效果，可以單擊此處運(yùn)行）

?1 var ?Drag? = ? {
?2 ???? " moveDiv " : null ,
?3 ???? " dragObj " : null ,
?4 ???? " draging " : false ,
?5 ?? " start " : function (ev) {
?6 ??????Drag.dragObj? = ?Utils.getTarget(ev);
?7 ?????? if (Drag.isdragable()) {
?8 ????????Drag.createDiv();
?9 ????????Drag.draging? = ? false ;
10 ??????}
11 ???? return ? false ;
12 ??} ,
13 ?? " draging " : function (ev) {
14 ?????? if ( ! Drag.isdragable()? || ?Drag.moveDiv? == ? null ) {
15 ?????????? return ;
16 ??????}
17 ??????
18 ?????? // ?設(shè)置被選定對(duì)象的鼠標(biāo)跟隨效果
19 ?????? if ( ! Drag.draging) {
20 ?????????? var ?move? = ?Drag.dragObj.cloneNode( true );
21 ??????????Drag.moveDiv.appendChild(move);
22 ??????}
23 ????Drag.moveDiv.style.top?? = ?(Utils.getPosition(ev)).top;
24 ????????Drag.moveDiv.style.left? = ?(Utils.getPosition(ev)).left;
25 ????????
26 ???????? // ?使用DOM操作，替換拖動(dòng)過(guò)程中元素的位置
27 ???????? var ?mouseOverObj? = ?Utils.getTarget(ev);????????
28 ???????? if (mouseOverObj.getAttribute( " dragable " )? || ?mouseOverObj.getAttribute( " container " )) {
29 ???????????? if (Drag.dragObj.parentNode? != ?mouseOverObj.parentNode) {
30 ???????????????? if (mouseOverObj.nextSibling) {
31 ????????????????????mouseOverObj.parentNode.insertBefore(Drag.dragObj,mouseOverObj);
32 ??????????????} else {
33 ????????????????mouseOverObj.parentNode.appendChild(Drag.dragObj);
34 ??????????????}
35 ????????????} else {
36 ???????????????? if (mouseOverObj.nextSibling) {
37 ????????????????????Drag.dragObj.parentNode.insertBefore(Drag.dragObj,mouseOverObj);
38 ??????????????} else {
39 ????????????????Drag.dragObj.parentNode.appendChild(Drag.dragObj);
40 ??????????????}
41 ??????}
42 ????}
43 ????
44 ???? // ?設(shè)置狀態(tài)為拖動(dòng)中
45 ????Drag.draging? = ? true ;
46 ???? return ? false ;
47 ??} ,
48 ?? " end " : function () {
49 ????Drag.dragObj? = ? null ;
50 ????Drag.removeDiv();
51 ????Drag.draging? = ? false ;
52 ???? return ? false ;
53 ??} ,
54 ?? " removeDiv " : function () {
55 ?????? // ?移除拖動(dòng)時(shí)跟隨鼠標(biāo)移動(dòng)的虛擬DIV層
56 ???? if (Drag.moveDiv? != ? null ) {
57 ??????????Drag.moveDiv.style.display? = ? " none " ;
58 ??????????Drag.moveDiv.parentNode.removeChild(Drag.moveDiv);
59 ????????Drag.moveDiv? = ? null ;
60 ??????}
61 ??} ,
62 ?? " createDiv " : function () {
63 ??????? // ?初始化拖動(dòng)時(shí)跟隨鼠標(biāo)移動(dòng)的虛擬DIV層
64 ???????Drag.removeDiv();
65 ?????Drag.moveDiv? = ?document.createElement( " div " );
66 ?????Drag.moveDiv.style.cssText? = ? " position:absolute;z-index:10; " ;
67 ?????document.body.appendChild(Drag.moveDiv);
68 ??} ,
69 ?? " isdragable " : function () {
70 ?????? // ?驗(yàn)證當(dāng)前對(duì)象是否為可拖動(dòng)的對(duì)象
71 ???? if (Drag.dragObj? == ? null ? || ? ! Drag.dragObj.getAttribute( " dragable " )) {
72 ?????????? return ? false ;
73 ??????}
74 ?????? return ? true ;
75 ??}
76 }

有點(diǎn)多喲，呵呵~~
先看“start”方法，首先獲得事件源，然后判斷是否當(dāng)前對(duì)象可以拖動(dòng)，如果可以拖動(dòng)，則調(diào)用Drag.createDiv()，設(shè)置一個(gè)虛擬的DIV，用來(lái)顯示當(dāng)前對(duì)象跟隨鼠標(biāo)移動(dòng)的效果，然后Drag.draging = false
設(shè)置當(dāng)前拖動(dòng)狀態(tài)為未拖動(dòng)。最后一個(gè)，return false，別忘記了，不寫在FF里會(huì)出點(diǎn)小問(wèn)題。

然后再看“draging”方法，同樣首先判斷當(dāng)前對(duì)象是否可以拖動(dòng)，然后判斷當(dāng)前拖動(dòng)狀態(tài)，如果為FALSE，則復(fù)制當(dāng)前被拖動(dòng)的對(duì)象，并添加到跟隨鼠標(biāo)移動(dòng)的DIV里，這樣，跟隨鼠標(biāo)移動(dòng)的才是當(dāng)前對(duì)象。其實(shí)，后面的代碼就比較簡(jiǎn)單了，主要就是進(jìn)行元素位置替換（nextSibling仿佛在FF不能使用，所以，F(xiàn)F中最后一個(gè)對(duì)象向下移動(dòng)會(huì)有點(diǎn)問(wèn)題）。但是在拖動(dòng)過(guò)程中，需要注意的一個(gè)問(wèn)題，就是當(dāng)前跟隨鼠標(biāo)移動(dòng)的DIV層千萬(wàn)不要擋住光標(biāo)，如果擋住光標(biāo)，則不能通過(guò)簡(jiǎn)單的srcElement方法取到當(dāng)前的元素，你可能就只有通過(guò)坐標(biāo)判斷等辦法去實(shí)現(xiàn)了.........就有點(diǎn)復(fù)雜了。

"end"方法，其實(shí)就更簡(jiǎn)單了，差不多都是些清理的操作。

最后，別忘記了加上事件監(jiān)控和HTML代碼。

1 document.onmousemove? = ?Drag.draging;
2 document.onmouseup??? = ?Drag.end;
3 document.onmousedown? = ?Drag.start;

1 < div?id = " container1 " ?container = " true " ?style = " width:200px;height:300px;background-color:FFFff2;float:left " >
2 ?? < div?id = " test1 " ?dragable = " true " ?style = " width:200px;background-color:FF00F0;cursor:pointer " ? > 111 </ div >
3 ?? < div?id = " test2 " ?dragable = " true " ?style = " width:200px;background-color:FFAAF0;cursor:pointer " > 222 </ div >
4 ?? < div?id = " test3 " ?dragable = " true " ?style = " width:200px;background-color:FF76AF;cursor:pointer " > 333 </ div >
5 ?? < div?id = " test4 " ?dragable = " true " ?style = " width:200px;background-color:FFA770;cursor:pointer " > 444 </ div >
6 ?? < div?id = " test5 " ?dragable = " true " ?style = " width:200px;background-color:a90aF0;cursor:pointer " > 555 </ div >
7 </ div >