RT，拖動可能是時下比較流行的一個js效果之一,在感嘆創造者的神奇之外，我懷作好奇，也來嘗試了一把(當然，是在欣賞了不少拖動代碼的基礎上，并妄想通過最簡單的辦法實現)。

其實，拖動特效可以由3個主要部分組成，開始拖動，拖動，結束拖動。

哎，不說這么多了（攝影的朋友肯定要說， 怎么還不上圖了...呵呵）,好，我就來點代碼吧。

開始拖動之前，先上2個簡單的工具方法：

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

比較簡單，相信大家看完注釋都能明白。


下面，開始本章的重要部分，拖動。還是先看代碼吧：

（如果你想看到深動的效果，可以單擊此處運行）
?1var?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??????//?設置被選定對象的鼠標跟隨效果
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操作，替換拖動過程中元素的位置
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????//?設置狀態為拖動中
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??????//?移除拖動時跟隨鼠標移動的虛擬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???????//?初始化拖動時跟隨鼠標移動的虛擬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??????//?驗證當前對象是否為可拖動的對象
71????if(Drag.dragObj?==?null?||?!Drag.dragObj.getAttribute("dragable")){
72??????????return?false;
73??????}
74??????return?true;
75??}
76}



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

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

"end"方法，其實就更簡單了，差不多都是些清理的操作。

最后，別忘記了加上事件監控和HTML代碼。
1document.onmousemove?=?Drag.draging;
2document.onmouseup???=?Drag.end;
3document.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>


over，我這個僅僅是個簡易的拖動效果，呵呵！希望大家能發現更簡單的辦法。