Html新增属性之拖拽（drag）

darg

wx-18538561085

3198人浏览 · 2023-03-09 16:53:01

wx-18538561085 · 2023-03-09 16:53:01 发布

元素在拖放过程中触发的事件
HTML5中，只要将元素的 draggable 属性设置为 true 就可以实现拖放功能，在拖放过程中，触发了多个事件，如下：

dragstart:事件主体是被拖放元素，在开始拖放被拖放元素时触发。
drag：事件主体是被拖放元素，在正在拖放被拖放元素时触发。
dragenter：事件主体是目标元素，在被拖放元素进入某元素时触发。
dragover：事件主体是目标元素，在被拖放在某元素内移动时触发。
dragleave：事件主体是目标元素，在被拖放元素移出目标元素是触发。
drop：事件主体是目标元素，在目标元素完全接受被拖放元素时触发。
dragend：事件主体是被拖放元素，在整个拖放操作结束时触发。

以上我们看到拖动总共有7个事件，其中事件主体是拖放元素的是，dragstart（开始拖动） 、drag（正在拖放）
 、dragend（拖放结束），其他4个事件主体都是目标元素，进入、移动、离开、完全进入四个状态。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5实现拖拽操作</title>
    <style>
        .album {
            border: 3px dashed #ccc;
            float: left;
            margin: 10px;
            min-height: 100px;
            padding: 10px;
            width: 220px;
        }

        img {
            width: 200px;
            height: 50px;
        }
    </style>
</head>

<body>
    <div id="info">
        <h2>可将照片直接拖到垃圾箱中</h2>
    </div>
    <div id="album" class="album">
        <h2>相册</h2>
        <img draggable="true" id="img1" src="./1.jpg" />
        <img draggable="true" id="img2" src="./2.jpg" />
        <img draggable="true" id="img3" src="./1.jpg" />
    </div>
    <div id="trash" class="album">
        <h2>回收站</h2>
    </div>
    <script>
        // function init() {
        var info = document.getElementById("info");
        var src = document.getElementById("album");
        //开始拖放操作
        src.ondragstart = function (e) {
            console.log('ssssssssssdddd', e, e.target.id);
            var dragImgId = e.target.id;
            //获得被拖动元素
            var dragImg = document.getElementById(dragImgId);
            //拖放操作结束
            dragImg.ondragend = function (e) {
                info.innerHTML = "可将照片直接拖到回收站";
            };
            e.dataTransfer.setData("text", dragImgId);
        };
        //拖放过程中
        src.ondrag = function (e) {
            info.innerHTML = "照片正在被拖动";
        }
        //获得拖放的目标元素
        var target = document.getElementById("trash");
        //取消默认事件
        target.ondragenter = function (e) {
            e.preventDefault();
        }
        target.ondragover = function (e) {
            e.preventDefault();
        }
        target.ondrop = function (e) {
            var draggedID = e.dataTransfer.getData("text");
            //获取相册中的DOM对象
            var oldElem = document.getElementById(draggedID);
            //从相册DIV中删除该照片的节点
            oldElem.parentNode.removeChild(oldElem);
            //将被拖动的照片DOM节点添加到垃圾桶DIV中；
            target.appendChild(oldElem);
            info.innerHTML = "可将照片直接拖到回收站";
            e.preventDefault();
        }
        // }
    </script>
</body>

</html>