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