【学习】拖拽事件有哪些
参考链接：
- https://www.jianshu.com/p/d07a623a7369
- https://developer.mozilla.org/zh-CN/docs/Web/API/DataTransfer/getData
- https://blog.csdn.net/weixin_44797182/article/details/98455687
元素如果有draggale属性、便可以拖动该元素。首先初始化页面：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>drag</title>
<style type="text/css">
#stone {
width: 20px;
height: 20px;
border: 1px solid #000
}
#canvas {
width: 200px;
height: 200px;
background: #1273
}
</style>
</head>
<body>
<div id="stone" draggable="true"></div>
<div id="canvas"></div>
</body>
</html>
DataTransfer.setData()
设置被拖放元素为指定的数据和类型。
拖动这个元素时会触发ondragstart事件，修改代码、捕获这个event，设置被拖动元素的数据:
<body>
<div id="stone" draggable="true" ondragstart="handleDragStart(event)"></div>
<div id="canvas"></div>
<script>
function handleDragStart(e) {
e.dataTransfer.setData("text/plain", e.target.id);
}
</script>
</body>
DataTransfer.getData()
获取被拖放元素的数据。HTML5开始要求至少需要一个参数，否则会报错。
将元素拖入容器中
需要将容器绑定ondragover事件。ondragover 事件规定在何处放置被拖动的数据。
默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，需要使用e.preventDefault() 方法
放置元素
需要将容器绑定ondrop事件
修改代码如下：
<div id="canvas" ondragover="handleDragOver(event)" onDrop="handleDrop(event)"></div>
<script>
function handleDragStart(e) {
e.dataTransfer.setData("text/plain", e.target.id);
}
function handleDragOver(e) {
e.preventDefault();
}
function handleDrop(e) {
e.preventDefault();
var data = e.dataTransfer.getData("text/plain");
e.target.appendChild(document.getElementById(data));
}
</script>
