基本概念：创建一个绝对定位的元素，使其可以用鼠标移动。
拖放功能
- 当在拖动元素时，用户点击那一点就是指针保持的位置。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48var DragDrop=function(){
var dragging=null,
diffX=0,
diffY=0;
function handlerEvent(event){
//获取事件和目标
event=EventUtil.getEvent(event);
var target=EventUtil.getTarget(event);
//确定事件类型
switch(event.type){
case "mousedown":
if(target.className.indexOf("draggable")>-1){ //快捷的使用标记语言来确定元素
dragging=target;
diffX=event.clientX-target.offsetLeft;
diffY=event.clientY-target.offsetTop;
}
break;
case "mousemove":
if(dragging!==null){
//指定位置
dragging.style.left=(event.clientX-diffX)+"px";
dragging.style.top=(event.clientY-diffY)+"px";
}
break;
case "mouseup":
dragging=null;
break;
}
};
//公共接口
return {
enable:function(){
EventUtil.addHandler(document,"mousedown",handlerEvent);
EventUtil.addHandler(document,"mousemove",handlerEvent);
EventUtil.addHandler(document,"mouseup",handlerEvent);
},
disable:function(){
EventUtil.removeHandler(document,"mousedown",handlerEvent);
EventUtil.removeHandler(document,"mousemove",handlerEvent);
EventUtil.removeHandler(document,"mouseup",handlerEvent);
}
}
}();
添加自定义事件
- 为什么要添加？使用自定义事件来指示拖动开始、正在拖动、拖动结束。
- 思路：创建一个
EventTarget对象，然后添加enable()和disable()方法，最后返回这个对象。1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71var DragDrop=function(){
var dragdrop=new EventTarget(),
dragging=null,
diffX=0,
diffY=0;
function handlerEvent(event){
//获取事件和目标
event=EventUtil.getEvent(event);
var target=EventUtil.getTarget(event);
//确定事件类型
switch(event.type){
case "mousedown":
if(target.className.indexOf("draggable")>-1){ //快捷的使用标记语言来确定元素
dragging=target;
diffX=event.clientX-target.offsetLeft;
diffY=event.clientY-target.offsetTop;
dragdrop.fire({type:"dragstart",target:dragging,x:event.clientX,y:event.clientY});
}
break;
case "mousemove":
if(dragging!==null){
//指定位置
dragging.style.left=(event.clientX-diffX)+"px";
dragging.style.top=(event.clientY-diffY)+"px";
dragdrop.fire({type:"drag",target:dragging,x:event.clientX,y:event.clientY});
}
break;
case "mouseup":
dragdrop.fire({type:"dragend",target:dragging,x:event.clientX,y:event.clientY});
dragging=null;
break;
}
};
//公共接口
dragdrop.enable=function(){
EventUtil.addHandler(document,"mousedown",handlerEvent);
EventUtil.addHandler(document,"mousemove",handlerEvent);
EventUtil.addHandler(document,"mouseup",handlerEvent);
};
dragdrop.disable=function(){
EventUtil.removeHandler(document,"mousedown",handlerEvent);
EventUtil.removeHandler(document,"mousemove",handlerEvent);
EventUtil.removeHandler(document,"mouseup",handlerEvent);
};
return dragdrop;
}();
//自定义事件后，可以为DragDrop对象的每个事件添加事件处理程序
DragDrop.addHandler("dragstart",function(event){
var status=document.getElementById("status");
status.innerHTML="Started dragging"+event.target.id;
});
DragDrop.addHandler("drag",function(event){
var start=document.getElementById("status");
status.innnerHTML+="<br/>Dragged"+event.target.id+" to ("+event.x+","+event.y+")";
});
DragDrop.addHandler("drag",function(event){
var start=document.getElementById("status");
status.innnerHTML+="<br/>Dragged"+event.target.id+" at ("+event.x+","+event.y+")";
});
