【学习】拖拽事件有哪些

参考链接：

元素如果有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>