javascript拖动(拖拽)之我见 - 简约版

 拖动可能是时下比较流行的一个js效果之一,在感叹创造者的神奇之外，我怀作好奇，也来尝试了一把(当然，是在欣赏了不少拖动代码的基础上，并妄想通过最简单的办法实现)。

其实，拖动特效可以由3个主要部分组成，开始拖动，拖动，结束拖动。

哎，不说这么多了（摄影的朋友肯定要说， 怎么还不上图了...呵呵）,好，我就来点代码吧。

开始拖动之前，先上2个简单的工具方法：

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 } ;
   }  
}

<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>
（如果你想看到深动的效果，可以单击此处运行）

点击下载此文件

• 打印文档
• 推荐好友
• 
• 返回顶部
• 增大字体
• 减少字体

• 上一篇文章：Javascript 如何实现对象的拖动？
• 下一篇文章：金山代理CEO求伯君"转正" 正式掌帅印