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 阅读(167)
评论(0) 编辑 收藏