使用原生drag拖放元素时，event对象的dataTransfer属性们dataTransfer属性如下：

57 阅读 0 评论 38 点赞

我是靠谱客的博主感动泥猴桃，最近开发中收集的这篇文章主要介绍使用原生drag拖放元素时，event对象的dataTransfer属性们dataTransfer属性如下：，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

拖放元素时，拖放事件发生顺序如下：
dragstart ->drag -> dragenter -> dragover ->drop ->dragend 还有一个dragleave
他们的event对象特有一个dataTransfer属性，主要用于源元素和目标元素之间传递数据

dataTransfer属性如下：

1. setData(key, value)

该方法只能在dragstart中调用，其他事件回调中调用无效
key:数据的类型或格式（也可以自定义）

名称	含义
text/plain	文本格式
text/html	html格式
text/uri-list	链接格式

拖动文本（默认是text）或者从操作系统向浏览器拖拽文件时，无需调用，系统会自动完成

2. getData(key)

只能在drop中调用，获取具体的值

3. clearData([key])

清空数据，该方法只接收一个参数，要删除的数据类型
参数是可选的，如果不传参，删除所有数据类型

4. effectAllowed

设置或返回被拖动元素允许的操作行为。通常会与dropEffect结合使用
在dragstart中设置，其他事件回调中设置是无效的

名称	含义
none	不允许拖放，一旦设置了该属性，所有的拖放事件都无效了
copy	复制拖动元素
move	移动
link	链接
copymove	移动或者链接
copyLink	复制或者链接
linkMove	链接或者移动
all	任何操作都允许

5. dropEffect

设置目标元素上允许的拖放行为
可设置的值有：none copy link move
如果dropEffect的值不在effectAllowed范围内时拖放操作不会实现

6. files

文件信息，一般用于将文件从桌面拖动到浏览器目标区域

7. items

代表拖动数据

8. setDragImage(element, x, y)

设置拖动时显示的图像信息，他可以是画布或者其他任何元素
element：要自定义显示的图像，
x：图像距离鼠标位置水平偏移量，
y：图像距离鼠标位置垂直偏移量

<!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>拖拽测试</title>
<style>
#drag-target {
background: green;
width: 80px;
height:30px;
font-size:16px;
padding: 20px;
cursor: move;
}
#drag-aim {
list-style: none;
padding:0;
}
#drag-aim li {
padding:0;
margin: 20px 0;
height: 40px;
border: 1px solid #eee;
border-radius: 5px;
}
#drag-aim li.active {
background: rgba(255, 0, 0, .5);
border-color: red;
transition: all 0.3s;
}
</style>
</head>
<body>
<div id="drag-target" draggable="true">
try to drag me!
</div>
<p>
选中文本，并且拖动试一下！！！！！！！
</p>
<ul id="drag-aim">
<li>目标区域一</li>
<li>目标区域二</li>
<li>目标区域三</li>
</ul>
<script>
let target = document.querySelector('#drag-target');
let aim = document.querySelector('#drag-aim').querySelectorAll('li');
var img = new Image()
img.src= "assets/1.png"
target.addEventListener('dragstart', function(e){
console.log('开始拖动了')
aim[0].className = 'active'
e.dataTransfer.effectAllowed = "copyLink"
// 设置拖拽数据
e.dataTransfer.setData('aaa', 'https://cdn.glitch.com/20f985bd-431d-4807-857b-e966e015c91b%2Ftruck-clip-art-fire-truck4.png?1519011787956')
e.dataTransfer.setData('text/uri-list','https://cdn.glitch.com/20f985bd-431d-4807-857b-e966e015c91b%2Ftruck-clip-art-fire-truck4.png?1519011787956')
// 设置拖动图像
e.dataTransfer.setDragImage(img, 25, 25)
}, false)
target.addEventListener('dragend', function(e){
console.log('拖拽结束')
console.log(e.dataTransfer)
aim[0].className = ''
})
aim[0].addEventListener('dragover', function(e){
e.dataTransfer.dropEffect = 'link'
// 必须加这句，表示允许放置元素，否则监听不到drop事件
e.preventDefault()
}, false)
aim[0].addEventListener('drop', function(e){
e.preventDefault()
console.log('拖给我了！')
console.log(e.dataTransfer.getData('aaa'))
console.log(e.dataTransfer.getData('text'))
aim[0].appendChild(target)
}, false)
</script>
</body>
</html>