文章目录
简介
若不使用HTML5的拖放事件,我们仍可以通过mousedown
、mousemove
、mouseup
这三个事件来实现页面元素被鼠标拖拽的效果。
然而这样实现的拖拽仅仅是交互上的,即只是显示上的变化,并没有什么实质性的功能。而HTML5中直接提供了拖放的API,只要通过监听元素的拖放事件就能实现各种拖放功能。
若要拖放某个元素,则必须将其的draggable
属性设置为true
。img
和a
元素默认为true
。
拖放事件
拖放的过程中被拖放的对象被称为源对象,过拖放过程中间经过的其他对象被称为过程对象,最终到达的对象称作目标对象。
拖放事件可以用这三种对象来分类,不同的事件会被哪一种对象触发。
- 源对象:
dragstart
:源对象开始拖放,开始移动时事件触发drag
:源对象拖放过程中,移动被拖拽对象时触发dragend
:源对象拖放结束,整个拖放操作结束时触发。
- 过程对象:
dragenter
:源对象进入过程对象范围内,被拖拽对象进入过程对象时被触发dragover
:源对象在过程对象范围内移动,被拖拽对象在过程对象内移动时触发dragleave
:源对象离开过程对象的范围,被拖拽对象离开目标对象时触发
- 目标对象:
drop
:源对象拖放到目标对象中,目标对象完全接受被拖拽对象时触发,可理解为在目标对象内松手时触发。
dataTransfer对象
在所有的拖放事件中都提供了一个数据传输对象dataTransfer
,主要是用于在源对象和目标对象之间传递数据。
方法
setData(format, data)
- 设置拖拽事件中要传递的数据,
format
的参数为数据类型 - 该方法向
dataTransfer
中对象中存入数据,接受两个参数,第一个表示要存入的数据类型,共有4种:- text/plain
- text/html
- text/xml
- text/uri-list
- 第二个参数为要存入的数据,例如:
event.dataTransfer.setData('text/plain', 'hello world')
- 设置拖拽事件中要传递的数据,
注:如果给定类型的数据不存在,则将其添加到拖动数据存储的末尾,使得dataTransfer.types
列表中的最后一个项目将是新类型。
-
getData(format)
- 获得拖拽事件中传递的数据,
format
参数为数据类型 - 该方法从
dataTransfer
对象中读取数据,参数为在setData
方法中指定的数据类型,例如:event.dataTransfer.getData('text/plain')
- 获得拖拽事件中传递的数据,
-
clearData()
- 该方法清空
dataTransfer
对象中存储的数据,参数可选,为数据类型。若为空,则清空所有数据。
- 该方法清空
-
setDragImage(element,x,y)
- 该方法通过
img
元素来设置拖放图标 element
表示拖拽时鼠标下面的图片(通常是image元素,也可以说canvas元素)- x、y分别指示相对于图片的横向和纵向偏移量,相对应鼠标指针。
- 该方法通过
-
files
属性- 返回被拖拽的文件列表,是一个
FileList
对象,有length
属性,可通过下标访问。
- 返回被拖拽的文件列表,是一个
例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.container{
width: 200px;
height: 300px;
background: #ff0000;
}
.item{
width: 200px;
height: 100px;
background: pink;
}
.dragOver{
background: rgba(255, 0, 0, 0.5);
}
.hidden{
display: none;
}
</style>
</head>
<body>
<div class="container" id='container' ondragleave="dragleave(event)" ondragenter="dragenter(event)" ondrop="drop(event)" ondragover="dragover(event)"></div>
<div class="item" draggable="true" ondragstart="dragStart(event)" id="item"></div>
<img src="WechatIMG1607.jpeg" class="hidden"/>
<script>
function dragStart(e){
e.dataTransfer.setData('id', e.target.id);
let image = document.querySelector('img').cloneNode();
image.classList.remove('hidden');
e.dataTransfer.setDragImage(image,150,150);
}
function drop(e){
e.preventDefault();
let id = e.dataTransfer.getData('id');
e.target.appendChild(document.getElementById(id));
}
function dragover(e){
e.preventDefault();
e.target.classList.add('dragOver');
}
function dragleave(e){
console.log('leave');
e.target.classList.remove('dragOver');
}
</script>
</body>
</html>
如果想自己试试效果可以把图片自行换掉。
效果如下:
(不要吐槽我为啥放只牛的图片…正好在桌面上看到就用了…)