HTML5属性-拖拽

发布时间：2024年01月18日

拖拽（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>

文章来源:https://blog.csdn.net/2301_76760417/article/details/135635667
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
最新文章