HTML5 drag api的使用
万俟小林
dragstart:事件主体是被拖放元素，在开始拖放被拖放元素时触发，。darg:事件主体是被拖放元素，在正在拖放被拖放元素时触发。dragenter:事件主体是目标元素，在被拖放元素进入某元素时触发。dragover:事件主体是目标元素，在被拖放在某元素内移动时触发。dragleave:事件主体是目标元素，在被拖放元素移出目标元素是触发。drop:事件主体是目标元素，在目标元素完全接受被拖放元素时触发。dragend:事件主体是被拖放元素，在整个拖放操作结束时触发
然后我们看具体用法上代码
<!DOCTYPE html>
<html lang="zh">
<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>drag Api 拖拽用法示例</title>
<style type="text/css">
#dropBox {
position: absolute;
width: 100px;
height: 100px;
background-color: green;
border: 1px solid antiquewhite;
}
#wrarry {
position: absolute;
top: 0;
right: 0;
width: 300px;
height: 300px;
background-color: red;
border: 1px solid antiquewhite;
}
</style>
</head>
<body>
<div id="dropBox" draggable="true">
</div>
<div id="wrarry">
</div>
<script type="text/javascript">
dropBox.ondragstart = (event) => {
console.log('dropBox开始拖动');
event.dataTransfer.setData("Text", event.target.id);
}
dropBox.ondragend = (event) => {
console.log('dropBox结束拖动');
}
wrarry.ondragenter = (event) => {
event.preventDefault();
console.log('进入wrarry触发');
}
wrarry.ondragover = (event) => {
event.preventDefault();
console.log('进入wrarry内部触发');
}
wrarry.ondragleave = (event) => {
event.preventDefault();
console.log('离开wrarry触发');
}
wrarry.ondrop = (event) => {
event.preventDefault()
var data = event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(data));
}
document.documentElement.ondragover = (event)=>{
event.preventDefault()
}
document.documentElement.ondrop = (event) => {
event.preventDefault()
var data = event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(data));
}
</script>
</body>
</html>DataTransfer(setData()方法)
先来看看 官方的解释
DataTransfer对象专门用来存储拖放时要携带的数据，它可以被设置为拖放事件对象的DataTransfer属性。—把拖动的数据存入其中
setData有两个参数：
1.第一个参数为携带数据的数据种类的字符串，只能填入类 似“text/plain”或“textml”的表示 MIME类型的文字
2.第二个参数为要携带的数据
目标元素使用getData（）方法
(1).目标元素接受到被拖放的元素后，执行getData()方法从DataTransfer里获取数据
(2).getData()方法的参数为setData()方法中指定的数据类型
实例：
<span
v-else
:title="item.cameraName"
class="tree-span"
draggable="true"
@dragstart="drag($event, item)"
></span>//组件一：（传递数据的组件）
drag(e, item) {
e.dataTransfer.setData("deviceId", item.id);
e.dataTransfer.setData("playOutputUrl", item.playOutputUrl);
},
//组件二 （接收数据的组件）
drop(e, item) {
let deviceId = e.dataTransfer.getData("deviceId");
let playOutputUrl=e.dataTransfer.getData("playOutputUrl");
}如果传递的数据多 可以把组件一的方法 多写几个
在组件二中对应 名字 获取即可
类似资料：