posts - 40,  comments - 4,  trackbacks - 0

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  }
 


下面,开始本章的重要部分,拖动。还是先看代码吧:

(如果你想看到深动的效果,可以单击此处运行

 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 >
posted on 2006-06-28 17:25 larryjava 阅读(148) 评论(0)  编辑  收藏

只有注册用户登录后才能发表评论。


网站导航: