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 } 比较简单，相信大家看完注释都能明白。 下面，开始本章的重要部分，拖动。还是先看代码吧： <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; } // 设置被选定对象的鼠标跟随效果 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操作，替换拖动过程中元素的位置 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); } } } // 设置状态为拖动中 Drag.draging = true; return false; }, "end":function(){ Drag.dragObj = null; Drag.removeDiv(); Drag.draging = false; return false; }, "removeDiv":function(){ // 移除拖动时跟随鼠标移动的虚拟DIV层 if(Drag.moveDiv != null){ Drag.moveDiv.style.display = "none"; Drag.moveDiv.parentNode.removeChild(Drag.moveDiv); Drag.moveDiv = null; } }, "createDiv":function(){ // 初始化拖动时跟随鼠标移动的虚拟DIV层 Drag.removeDiv(); Drag.moveDiv = document.createElement("div"); Drag.moveDiv.style.cssText = "position:absolute;z-index:10;"; document.body.appendChild(Drag.moveDiv); }, "isdragable":function(){ // 验证当前对象是否为可拖动的对象 if(Drag.dragObj == null || !Drag.dragObj.getAttribute("dragable")){ return false; } return true; } } var Utils = { "getTarget":function(ev){ // 获得当前的目标源对象 ev = ev || window.event; var tget = ev.target || ev.srcElement; return tget; }, "getPosition":function(ev){ // 设置坐标 // 模拟一个鼠标跟随的效果 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> （如果你想看到深动的效果，可以 单击此处运行） 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 // 设置被选定对象的鼠标跟随效果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代码。 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 > over，我这个仅仅是个简易的拖动效果，呵呵！希望大家能发现更简单的办法。