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è)主要部分組成，開(kāi)始拖動(dòng)，拖動(dòng)，結(jié)束拖動(dòng)。

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

開(kāi)始拖動(dòng)之前，先上2個(gè)簡(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 }

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


下面，開(kāi)始本章的重要部分，拖動(dòng)。還是先看代碼吧：

（如果你想看到深動(dòng)的效果，可以單擊此處運(yùn)行）
?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??????//?設(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，別忘記了，不寫(xiě)在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代碼。
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，我這個(gè)僅僅是個(gè)簡(jiǎn)易的拖動(dòng)效果，呵呵！希望大家能發(fā)現(xiàn)更簡(jiǎn)單的辦法。