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
}
比较简单,相信大家看完注释都能明白。
下面,开始本章的重要部分,拖动。还是先看代码吧:
(如果你想看到深动的效果,可以
单击此处运行)
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,我这个仅仅是个简易的拖动效果,呵呵!希望大家能发现更简单的办法。