RT，拖動可能是時下比較流行的一個js效果之一,在感嘆創(chuàng)造者的神奇之外，我懷作好奇，也來嘗試了一把(當(dāng)然，是在欣賞了不少拖動代碼的基礎(chǔ)上，并妄想通過最簡單的辦法實現(xiàn)
)。
其實，拖動特效可以由3個主要部分組成，開始拖動，拖動，結(jié)束拖動。
哎，不說這么多了（攝影的朋友肯定要說， 怎么還不上圖了...呵呵）,好，我就來點代碼吧。
開始拖動之前，先上2個簡單的工具方法：
比較簡單，相信大家看完注釋都能明白。
?
?
1
???
var
??Utils??
=
????
{
?
2
?????
"
?getTarget?
"
?:?
function
?(ev)??
{
?
3
?????????
//
??獲得當(dāng)前的目標(biāo)源對象?
?
4
?????????ev??
=
??ev??
||
??window.event;
?
5
?????????
var
??tget??
=
??ev.target??
||
??ev.srcElement;
?
6
?????????
return
??tget;
?
7
???}
?,
?
8
?????
"
?getPosition?
"
?:?
function
?(ev)??
{
?
9
?????????
//
??設(shè)置坐標(biāo)?
10
??????????
//
??模擬一個鼠標(biāo)跟隨的效果?
11
?????????ev??
=
??ev??
||
??window.event;
12
??????????
return
????
{top:document.body.scrollTop??
+
??ev.clientY??
+
???
10
?,
13
????????????????????????left:document.body.scrollLeft??
+
??ev.clientX??
+
???
10
?}
?;
14
???}
?
15
?}
?
下面，開始本章的重要部分，拖動。還是先看代碼吧：
（如果你想看到深動的效果，可以單擊此處運(yùn)行）
?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
??????
//
?設(shè)置被選定對象的鼠標(biāo)跟隨效果
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
????
//
?設(shè)置狀態(tài)為拖動中
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
??????
//
?移除拖動時跟隨鼠標(biāo)移動的虛擬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
???????
//
?初始化拖動時跟隨鼠標(biāo)移動的虛擬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
??????
//
?驗證當(dāng)前對象是否為可拖動的對象
71
????
if
(Drag.dragObj?
==
?
null
?
||
?
!
Drag.dragObj.getAttribute(
"
dragable
"
))
{
72
??????????
return
?
false
;
73
??????}
74
??????
return
?
true
;
75
??}
76
}
有點多喲，呵呵~~
先看“start”方法，首先獲得事件源，然后判斷是否當(dāng)前對象可以拖動，如果可以拖動，則調(diào)用Drag.createDiv()，設(shè)置一個虛擬的DIV，用來顯示當(dāng)前對象跟隨鼠標(biāo)移動的效果，然后Drag.draging = false
設(shè)置當(dāng)前拖動狀態(tài)為未拖動。最后一個，return false，別忘記了，不寫在FF里會出點小問題。
然后再看“draging”方法，同樣首先判斷當(dāng)前對象是否可以拖動，然后判斷當(dāng)前拖動狀態(tài)，如果為FALSE，則復(fù)制當(dāng)前被拖動的對象，并添加到跟隨鼠標(biāo)移動的DIV里，這樣，跟隨鼠標(biāo)移動的才是當(dāng)前對象。其實，后面的代碼就比較簡單了，主要就是進(jìn)行元素位置替換（nextSibling仿佛在FF不能使用，所以，F(xiàn)F中最后一個對象向下移動會有點問題）。但是在拖動過程中，需要注意的一個問題，就是當(dāng)前跟隨鼠標(biāo)移動的DIV層千萬不要擋住光標(biāo)，如果擋住光標(biāo)，則不能通過簡單的srcElement方法取到當(dāng)前的元素，你可能就只有通過坐標(biāo)判斷等辦法去實現(xiàn)了.........就有點復(fù)雜了。
"end"方法，其實就更簡單了，差不多都是些清理的操作。
最后，別忘記了加上事件監(jiān)控和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 閱讀(157)
評論(0) 編輯 收藏