为了让元素可拖动,需要使用 HTML5 draggable 属性。
链接和图片默认是可拖动的,不需要 draggable 属性


在拖放的过程中会触发以下事件:

  1. 在拖动目标上触发事件 (源元素):
  • ondragstart - 用户开始拖动元素时触发
  • ondrag - 元素正在拖动时触发
  • ondragend - 用户完成元素拖动后触发
  1. 释放目标时触发的事件:
  • ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件
  • ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
  • ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件
  • ondrop - 在一个拖动过程中,释放鼠标键时触发此事件

将span拖放到div中

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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
window.onload = function() {


EventUtil.addHandler(document, "dragstart", function(event) {
event = EventUtil.getEvent(event);
//dataTransfer.setData()方法设置数据类型和拖动的数据
event.dataTransfer.setData("Text", event.target.id);


});

/ 默认情况下,数据/元素不能在其他元素中被拖放。
对于drop我们必须防止元素的默认处理
EventUtil.addHandler(document, "dragover", function(event) {
event = EventUtil.getEvent(event);
EventUtil.preventDefault(event);

});
/*对于drop,防止浏览器的默认处理数据(在drop中链接是默认打开)

利用dataTransfer.getData()方法获得拖放数据
拖拖的数据元素id
拖拽元素附加到drop元素*/
EventUtil.addHandler(document, "drop", function(event) {
event = EventUtil.getEvent(event);
EventUtil.preventDefault(event);
target = EventUtil.getTarget(event);
if (event.target.className == "droptarget") {
var data = event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(data));
}
// alert("ss");

});


}
var EventUtil = {
addHandler: function(element, type, handler) {
if (element.addEventListener) {
element.addEventListener(type, handler, false);
} else if (element.attachEvent) {
element.attachEvent("on" + type, handler);
} else {
element["on" + type] = handler;
}
},

// 解决浏览器兼容性问题
getEvent: function(event) {
return event ? event : window.event;
},

// 返回事件目标
getTarget: function(event) {
return event.target || event.srcElement;
},

//取消事件的默认行为。
preventDefault: function(event) {
if (event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
},

// 移除事件处理程序
removeHandler: function(element, type, handler) {
if (element.removeEventListener) {
element.removeEventListener(type, handler, false);
} else if (element.detachEvent) {
element.detachEvent("on" + type, handler);
} else {
element["on" + type] = null;
}
},

//提供相关元素的信息,relatedTarget这个属性只对与mouseover和mouseout事件才包含值。
getRelatedTarget: function(event) {
if (event.relatedTarget) {
return event.relatedTarget;
} else if (event.toElement) {
return event.toElement;
} else if (event.fromElement) {
return event.fromElement;
} else {
return null;
}
},

//获取鼠标按钮
/**
* 0: 表示没有按下按钮。
1: 表示按下了主鼠标按钮。
2: 表示按下了次鼠标按钮。
3: 表示同时按下了主、次鼠标按钮
4: 表示按下了中间的鼠标按钮。
5: 表示同时按下了主鼠标按钮和中间的鼠标按钮。
6: 表示同时按下了次鼠标按钮和中间的鼠标按钮。
7: 表示同时按下了三个鼠标按钮。*/
getButton: function(event) {
if (document.implementation.hasFeature("MouseEvents", "2.0")) {
return event.button;
} else {
switch (event.button) {
case 0:
case 1:
case 3:
case 5:
case 7:
return 0;
case 2:
case 6:
return 2;
case 4:
return 1;
}
}
},

//获得鼠标滚轮的增量值delta
getWheelDelta: function(event) {
if (event.wheelDelta) {
return (client.engine.opera && client.engine.opera < 9.5 ?
-event.wheelDelta : event.wheelDelta);
} else {
return -event.detail * 40;
}
},


//获取字符串编码 主要用于文本框 监听事件是keypress
getCharCode: function(event) {
if (typeof event.charCode == "number") {
return event.charCode;
} else {
return event.keyCode;
}
},

//取消进一步的事件捕获或者冒泡
stopPropagation: function(event) {
if (event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubble = true;
}
}
};
</script>
<style>

</style>
</head>

<body>
<a href="https://www.baidu.com" id="dragtarget">百度一下</a>
<br>
<br>
<span draggable="true" id="dragtarget1">阿清呀</span>
<br>
<br>
<div style="width:100px;height:100px;background-color: #bfa;" class="droptarget"></div>

</body>

</html>



愿你的坚持终有收获。