HTML新特性之七 —— 拖放API —— 小重点&小难点
Drag：拖动
Drop：释放、丢弃
Drag & Drop： D&D，拖动着一个元素可以在页面中某处释放操作。
HTML5中为拖放操作提供了七个事件句柄：
拖动的源对象(被拖动的对象)可以触发三个事件：
(1)dragstart：拖动开始事件
(2)drag： 拖动进行中事件
(3)dragend：拖动结束事件
一个拖动过程的组成：
1个dragstart + N个drag + 1个dragend
练习：实现一个可以随着拖动而移动的小飞机
提示：飞机图片必须绝对定位,才能修改left/top！drag事件中有e.pageX/Y，获取拖动事件相对于页面的坐标。
拖动的目标对象(固定不动的对象)可以触发四个事件：
(4)dragenter：拖动着进入事件
(5)dragover：拖动着在上方悬停事件
(6)dragleave：拖动着离开事件
(7)drop：在上方释放/松开
一个拖动过程对于目标对象可以由如下的事件组成：
1个dragenter + N个dragover + 1个dragleave
或者
1个dragenter + N个dragover + 1个drop
注意：只有阻止dragover的默认行为才可能触发drop！
7.如何在一次拖动事件的源对象和目标对象间传递数据？
HTML5的拖放API为拖放事件对象提供了一个新属性：
event.dataTransfer
数据转移对象(拖拉机)——用于在源对象和目标对象间传递数据。注意：源对象和目标对象的事件间的dataTransfer不是同一个对象，但是可以用这些不同的dataTransfer对象传递数据！
源对象的事件处理中——海南：
event.dataTransfer.setData(key, value)
目标对象的事件处理中——东北：
var value = event.dataTransfer.getData(key)
注意：key和value都只能是字符串
案例：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body {
text-align: center;
}
</style>
</head>
<body>
<h3>拖动的目标对象可以触发的事件</h3>
<p>3个飞机+1个垃圾箱，拖动着某个小飞机到垃圾箱上方，若松手了，就从DOM树上删除该小飞机</p>
<h3>不使用全局变量！</h3>
<img src="img/trash.png" id="trash">
<hr>
<img src="img/p3.png" id="p3" class="plane">
<img src="img/p4.png" id="p4" class="plane">
<img src="img/p5.png" id="p5" class="plane">
<script>
/*必须在源对象拖动开始时，记录是哪一个
在目标对象上释放时，删除该源对象*/
var list = document.querySelectorAll('.plane');
for(var i=0; i<list.length; i++){
var p = list[i];
//源对象可以触发的事件
p.ondragstart = function(e){
//源对象事件中保存数据
//e.dataTransfer.setData('planeID', '9999');
e.dataTransfer.setData('planeID', this.id);
}
p.ondrag = function(){}
p.ondragend = function(){}
}
//目标对象可以触发的事件
trash.ondragenter = function(){}
trash.ondragover = function(e){
e.preventDefault();
}
trash.ondragleave = function(){}
trash.ondrop = function(e){
//目标对象读取源对象传递的数据
var pid = e.dataTransfer.getData('planeID');
console.log('drop:'+ pid )
var p = document.getElementById(pid);
p.parentNode.removeChild(p);
}
</script>
</body>
</html>
1175
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
