js实现元素拖拽功能

最新推荐文章于 2024-10-09 15:55:54 发布

LookMe_WK

最新推荐文章于 2024-10-09 15:55:54 发布

阅读量474

点赞数 1

分类专栏：原生js # 拖拽功能文章标签： javascript 小程序

本文链接：https://blog.csdn.net/LookMe_WK/article/details/106341988

版权

原生js 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

拖拽功能

1 篇文章 0 订阅

订阅专栏

元素拖拽功能的实现

在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。
拖拽：Drag
释放：Drop
拖拽指的是鼠标点击源对象后一直移动对象不松手，一但松手即释放了

设置可拖拽

draggable 属性：就是标签元素要设置draggable=true，否则不会有效果
注意：链接和图片默认是可拖动的，不需要 draggable 属性。

DataTransfe

在进行拖放操作时，DataTransfer对象用来保存被拖动的数据。可以是一个或者多个。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .box1,
        .box2 {
            width: 200px;
            height: 200px;
            border: 1px solid red;
            margin-left: 300px;
        }
        
        .box2 {
            border: 1px solid blue;
        }
        
        span {
            background-color: red;
        }
    </style>
</head>

<body>
    <!-- 源对象 -->
    <div class="box1">
        <span draggable="true" id="spanTarget">拖走吧</span>
    </div>
    <!-- 目标对象 -->
    <div class="box2"></div>
    <script>
        // (1)ondragstart：源对象开始被拖动
        document.ondragstart = function(e) {
            console.log('源对象开始被拖动');
            // console.log(e);
            console.log(e.target.id);
            e.dataTransfer.setData('text', e.target.id);


        };
        // (2)ondrag：源对象被拖动过程中(鼠标可能在移动也可能未移动)
        document.ondrag = function() {
            console.log('源对象拖动过程中');

        };
        // (3)ondragend：源对象被拖动结束
        document.ondragend = function() {
            console.log('源对象被拖动结束');

        };
        //   **拖动源对象可以进入到上方的目标对象可以触发的事件：**

        // (1)ondragenter：目标对象被源对象拖动着进入
        document.ondragenter = function() {
            console.log('目标对象被源对象拖动着进入');

        };
        // (2)ondragover：目标对象被源对象拖动着悬停在上方
        document.ondragover = function(e) {
            console.log('目标对象被源对象拖动着悬停在上方');
            return false;

        };
        // (3)ondragleave：源对象拖动着离开了目标对象
        document.ondragleave = function() {
            console.log('源对象拖动着离开了目标对象');

        };
        // (4)ondrop：源对象拖动着在目标对象上方释放/松手
        document.ondrop = function(e) {
            console.log('源对象拖动着在目标对象上方释放/松手');
            var content = e.dataTransfer.getData('text');
            var conEle = document.getElementById(content);
            console.log(conEle);
            e.target.appendChild(conEle);
        };
    </script>
</body>

</html>