javascript拖动(拖拽)

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>

（如果你想看到深动的效果，可以单击此处运行）
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，我这个仅仅是个简易的拖动效果，呵呵！希望大家能发现更简单的办法。