HTML5属性-拖拽

最新推荐文章于 2025-06-28 09:25:27 发布

进击中的大学生

最新推荐文章于 2025-06-28 09:25:27 发布

阅读量1.8k

点赞数 19

CC 4.0 BY-SA版权

文章标签： html5 前端 html

本文链接：https://blog.youkuaiyun.com/2301_76760417/article/details/135635667

本文详细介绍了HTML5中的拖拽功能，包括draggable属性、DOM事件如ondragstart、ondragover和ondrop的使用，以及如何实现列表拖拽排序，并以SortableJS为例展示低代码拖拽配置的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

拖拽（drap && drop）在我们平时的工作中，经常遇到。表示为抓取对象以后拖放到另一个位置。目前，它是HTML5标准的一部分。本人将从以下几个方面讲解：

一、元素拖动

1.HTML5已经完全支持鼠标拖动元素，其中图片和链接默认就支持拖拽，而其他的元素需要设置属性 draggable=“true” 就可支持拖拽，其中在拖拽的过程中会默认触发一系列事件。

2.draggable 全局拖拽属性，规定元素是否可拖动

true: 规定元素的可拖动的
false: 规定元素不可拖动
auto: 使用浏览器的默认行为

二、Dom 事件

应用于当前被拖动元素

事件	描述
ondragstart	用户开始拖动元素时触发
ondrag	元素正在拖动时触发(整个过程持续触发)
ondragend	用户完成元素拖动后触发
ondragleave	当鼠标离开拖拽元素时调用

应用于目标元素

事件	描述
ondragenter	应用于目标元素，当鼠标拖拽元素进入时调用
ondragover	应用于目标元素，当停留在目标元素上时调用(持续触发)
ondrop	应用于目标元素，当在目标元素上松开鼠标时调用
ondragleave	应用于目标元素，当鼠标离开目标元素时调用

目标元素 ondrop 不生效

1、问题:ondrop 事件始终不触发，原因是 ondragover 事件是被拖拽元素在目标元素上拖拽过程中由目标元素触发，ondrop 事件是被拖拽元素在目标元素上面 drop 的时候由目标元素触发,
2、解决: 取消掉 ondragover 它的默认事件 e.preventDefault0 才可以正确触发

三、案例

3.1 列表拖拽排序

<!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>
        #continer {
            display: flex;
        }

        #box1 {
            width: 150px;
            border: 2px solid black;
            padding-bottom: 10px;
        }

        #box2 {
            margin-left: 100px;
            width: 150px;
            border: 2px solid black;
            padding-bottom: 10px;
        }

        #box1 li,
        #box2 li {
            position: relative;
            width: 100px;
            height: 30px;
            background: pink;
            margin: 10px auto 0;
            list-style: none;
            text-align: center;
            line-height: 30px;
        }
    </style>
</head>

<body>
    <div id="continer">
        <div id="box1">
            <ul style="padding: 0;">
                <li>1</li>
                <li>2</li>
                <li>3</li>
            </ul>
        </div>
        <div id="box2"></div>
    </div>
</body>
<script>
    let dragDom;

    let liList = document.getElementsByTagName('li');
    Array.from(liList).forEach((el, inx) => {
        el.setAttribute('draggable', true);
        el.ondragstart = function (e) {
            dragDom = e.target;
        }
    });

    let box2 = document.getElementById('box2');
    box2.ondragover = function (e) {
        e.preventDefault();
    }
    box2.ondrop = function (e) {
        box2.appendChild(dragDom);
        dragDom = null;
    }

    let box1 = document.getElementById('box1');
    box1.ondragover = function (e) {
        e.preventDefault();
    }
    box1.ondrop = function (e) {
        box1.appendChild(dragDom);
        dragDom = null;
    }
</script>

</html>

四、SortableJS

SortableJS 是一个功能强大的 JavaScript 拖拽库。可用于列表拖拽排序、以及低代码拖拽配置等场景。

案例：列表拖拽排序

<!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>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
</head>

<body>
    <div id="example1" class="list-group">
        <div class="list-group-item">Item 1</div>
        <div class="list-group-item">Item 2</div>
        <div class="list-group-item">Item 3</div>
        <div class="list-group-item">Item 4</div>
        <div class="list-group-item">Item 5</div>
        <div class="list-group-item">Item 6</div>
    </div>
</body>
<script>
    new Sortable(example1, {
        animation: 150,
    });
</script>

</html>