拖放API中的drag和drop实战

漫山遍野

写在前面

在HTML5之前,实现拖放功能需要借助mousedown/mousemove/mouseover/mouseout/mouseup等鼠标事件来完成,HTML5中拖放API的出现使很多事情变简单。下面是做笔记做笔记~

拖放过程

拖放:包括拖拽(drag)和释放(drop)

拖放中涉及两个元素,分别是:源对象和目标对象,如下图
源对象是被拖拽的元素,目标对象是要释放到的接收元素。
源对象和目标对象

拖放事件:

拖放事件流

拖放事件流为拖放操作开始后触发的一系列事件,分为以下两类:

发生在源对象上的事件

1
2
3
dragstart:用户开始拖动页面中的某个元素时触发的事件
drag: 源对象在拖拽过程中持续触发的事件
dragend:拖动完成时触发的事件,一般用于清空拖动过程中的状态等。

发生在目标对象上的事件

1
2
3
4
dragenter:源对象进入到目标对象时,会触发目标对象的ondragenter事件
dragleave:源对象移除之前调用了dragenter的元素时,目标元素触发的事件
dragover:源对象进入目标对象后持续触发的事件
drop:用户释放鼠标时,drop会在目标对象上被调用

设置元素可拖动

1
dragable = "true"

传输和控–dataTransfer

dataTransfer对象可用于每个拖放事件中。用于获取和设置实际放置的数据,主要属性及方法如下:

1
2
3
4
5
6
7
setData(format,data):在dragstart事件中调用此函数可以注册一个MIME类型格式的传输项。
getData(format):可以获取指定类型的注册数据项。
types:属性以数组形式返回所有当前注册的格式。
items:返回所有项机器相关格式列表
files:返回与放置相关的所有文件
clearData():不带参则清空所有注册数据,带参则移除指定注册项
…………等等

来点儿小栗子

说小栗子前说下两点:

触发dragover事件时,需要使用preventDefault()方法阻止默认事件,drag事件才能正常触发

dataTransfer中的files属性用到了File API规范的子集,files存放了文件列表,files支持下列属性:

1
2
3
4
name:带有扩展名的文件全名
type:文件的MIME类型
size:以字节为单位的文件大小
lastModifiedDate:最后一次修改文件内容的时间戳

下面会用到的FileReader对象详细请移步
FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 File 或 Blob 对象指定要读取的文件或数据。

其中File对象可以是来自用户在一个元素上选择文件后返回的FileList对象,也可以来自拖放操作生成的 DataTransfer对象,还可以是来自在一个HTMLCanvasElement上执行mozGetAsFile()方法后返回结果.

1.简单的节点拖放
可将任意节点拖放到其他元素上,并插入到目标元素的前面
拖放前后:
拖放节点效果

主要代码:

1
2
3
4
5
6
7
8
9
10
11
12
/*目标对象上触发的dragove事件*/
drag.addEventListener('dragover', function (e) {
e.preventDefault(); //阻止默认动作
})
/*源对象释放,目标对象上触发的事件*/
drag.addEventListener('drop', function (e) {
ele.classList.remove('draging');
if (e.target.nodeName === 'LI') {
e.target.parentNode.insertBefore(ele, e.target); //将源对象元素插入到目标元素前面
}
})

2.节点清除
可将龙猫丢进垃圾桶,即清除img元素节点
丢龙猫前后:
丢龙猫前后
主要代码:

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
<h3>拖动龙猫到垃圾桶后从DOM树中删除子元素</h3>
<img id="bin" src="./img/default.png">
<hr/>
<img id="item1" class="imgs" src="./img/01.jpeg">
<img id="item2" class="imgs" src="./img/02.jpg">
<img id="item3" class="imgs" src="./img/03.jpeg">
<script>
//为源对象添加事件监听 —— 记录拖动了哪一个源对象
var imgs = document.querySelectorAll('.imgs');
var target = document.querySelector('#bin');
for(var i=0; i<imgs.length; i++){
var pic = imgs[i];
pic.ondragstart = function(e){ //开始拖动源对象
e.dataTransfer.setData('imgID',this.id);//保存被拖拽源的id
}
}
//为目标对象添加事件监听 —— 删除拖动的源对象
target.ondragover= function(e){
e.preventDefault(); //阻止默认行为
}
target.ondrop= function(e){ //源对象松手释放在了目标对象中
//删除被拖动的源对象
var id = e.dataTransfer.getData('imgID');
var p = document.getElementById(id);
p.parentNode.removeChild(p); //从父元素中删除子节点
}
</script>

3.将本地图片拖放到页面中指定区域

可将你的美图拖到网页中显示

爆照前后效果:
爆照前后

主要代码:

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
var content = document.querySelector('#content');
document.addEventListener('dragover',function(e){
e.preventDefault(); //阻止document的默认事件
});
document.addEventListener('drop',function(e){
e.preventDefault(); //阻止document的默认事件(阻止照片在新窗口中打开)
});
content.addEventListener('dragover',function(e){
e.preventDefault();
})
content.addEventListener('drop',function(e){
var imgFs = e.dataTransfer.files[0]; //files存放了文件列表
//console.log(imgFs);
var fs = new FileReader(); //创建一个FileReader对象
fs.readAsDataURL(imgFs);
/*图片资源加载完成之后显示在content中*/
fs.onload = function(){
var img = new Image();
img.src = fs.result;
content.appendChild(img);
}
})

小结

对今天学习的知识点做个记录,欢迎大佬们指正~


我的窝

小花的博客

招摇撞骗(可自行忽略)

小花求赏→爱的辣条