HTML5拖放API实现拖放功能-优快云博客

本文链接：https://blog.youkuaiyun.com/IT00123/article/details/125876186

设置元素属性 draggable=true 即可让元素能够拖放

拖放源：被拖放的元素

拖放目标：被拖放的元素到达的目标元素

拖放源事件：

dragstart：拖放源开始被拖放时触发
drag：拖放源被拖放的过程中触发
dragend：拖放源在拖放结束时触发
拖放目标事件：

dragenter：拖放源进入元素边界时触发
dragleave：拖放源离开元素边界时触发
dragover：拖放源在元素内部时不断被触发
drop：拖放源被释放到元素内部时触发
dataTransfer是拖放事件对象中的一个属性，其中保存了跟拖放相关的信息，它的字符串属性dropEffect，可以设置鼠标在拖放目标中的样式，可设置的值为：

copy
move
link
none

效果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #result {
            width: 200px;
            border: 1px solid red;
            height: 200px;
        }
    </style>
</head>

<body>

    <p>请将下面图片拖入到框中</p>

    <!-- 
        ondragstart:该事件表示拖放开始
        ondragover：该事件表示拖放结束
        ondrag：该事件表示拖放过程
     -->

    <div id="result" ondragover="allowDrag(event)" ondrop="drop(event)"></div>

    <!-- draggable: 值为true时表示元素可拖动，默认为false， 表示不能拖动 -->

    <img src="img/屏幕截图 2022-07-18 211242.png" alt="" id="img" draggable="true" ondragstart="drag(event)">

    <script type="text/javascript">
        //用于施救的函数 拖动已开始
        function drag(ev) {
            ev.dataTransfer.setData("Text", ev.target.id);
        } //拖动过程

        function drop(ev) { // 允许其他元素拖放到此处

            ev.preventDefault(img); // 获取要拖放的元素id

            var id = ev.dataTransfer.getData("Text"); // 将一个标签添加到另一个标签中，可以使用appendChild();

            ev.target.appendChild(document.getElementById(id));
        } // 拖动结束
        function allowDrag(ev) { // 允许其他元素拖放到此处

            ev.preventDefault(img);
        }
    </script>
</body>

</html>

draggable="true" οndragstart="drag(event)" 给图点击事件

οndrοp="drop(event) 给目标拖拽