H5拖放基础和实战

最新推荐文章于 2025-08-15 22:56:20 发布

转载最新推荐文章于 2025-08-15 22:56:20 发布 · 72 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5b8ccf8751882542c8348b2a

文章标签：

#javascript #ViewUI

基础api了解

首先要使得一个元素可以拖动需要在元素上设置 draggable="true"。以下称被拖动的元素为拖动元素，拖动进入的元素为目标元素

1.dragstart：拖动元素，元素被拖动开始会触发的事件

2.dragend：拖动元素，元素被拖动后鼠标放开会触发的事件

3.dragenter：事件源是目标元素，拖动时鼠标进入会触发的事件。需要注意的是鼠标进入而不是元素进入。

4.dragover：事件源是目标元素，拖动元素在目标元素内移动会不停触发该事件

5.drop：事件源是目标元素，拖动元素在目标元素内被放开触发的事件，注意要触发该事件必须要取消dragover的默认事件（e.preventDefault()）

传递数据

h5还提供了一些接口用来方便拖放事件传递数据

1.e.dataTransfer.setData('data',data)传递数据，例如data可以是拖动元素的id使得目标元素可以判断是哪个元素被拖进了自己

2.e.dataTransfer.getData('data')接收数据

实践

功能：拖动列表项到目标列表项上那么拖动的列表项就会排在目标列表项的前面。拖动列表项到删除框内可以删除该列表项

实现的方法：h5拖放的api和传递数据的api 以及事件委托

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style>        li {            width: 200px;            height: 40px;            background-color: #ccc;            margin: 20px;            list-style: none;            display: block;        }        #trash-box {            width: 300px;            height: 200px;            background-color: #000;            color: #fff;        }    </style></head><body>    <ul>        <li class="drag-item1" draggable="true">列表项1</li>        <li class="drag-item2" draggable="true">列表项2</li>        <li class="drag-item3" draggable="true">列表项3</li>        <li class="drag-item4" draggable="true">列表项4</li>        <li class="drag-item5" draggable="true">列表项5</li>    </ul>    <div id="trash-box">删除列表</div>    <script type="text/javascript">        let trashBox = document.getElementById('trash-box'),            ul = document.getElementsByTagName('ul')[0];        ul.addEventListener('dragstart', function (e) {            let className = e.target.className            e.dataTransfer.setData('data', className)        })        ul.addEventListener('dragover', function (e) {            e.preventDefault();        })        ul.addEventListener('drop', function (e) {            if (e.target.nodeName === 'LI') {                let moveClass = e.dataTransfer.getData('data')                let moveLi = document.getElementsByClassName(moveClass)[0]                this.insertBefore(moveLi, e.target)            }        })        trashBox.addEventListener('dragover', function (e) {            e.preventDefault();        })        trashBox.addEventListener('drop', function (e) {            let deletClass = e.dataTransfer.getData('data');            let deletLi = document.getElementsByClassName(deletClass)[0];            deletLi.remove();        })    </script></body></html>复制代码

效果图：