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");
}

如果传递的数据多可以把组件一的方法多写几个
在组件二中对应名字获取即可

HTML5 drag api的使用

DataTransfer(setData()方法)

猜你喜欢