JS拖拽元素

最新推荐文章于 2023-10-17 19:40:46 发布

Float544

最新推荐文章于 2023-10-17 19:40:46 发布

阅读量243

点赞数

分类专栏：学习心得文章标签： javascript

本文链接：https://blog.csdn.net/qq_56392992/article/details/124030591

版权

学习心得专栏收录该内容

162 篇文章 0 订阅

订阅专栏

本文介绍了如何使用HTML5的拖放API实现元素的拖拽功能。通过监听'dragstart'、'dragover'和'drop'事件，设置数据传输并阻止默认行为，可以实现在页面上拖拽元素并将其放置到指定区域。示例代码展示了从'.start'类元素到'.end'类元素的拖放过程，当元素被放置时，通过获取数据ID找到对应DOM并添加到目标元素中。

摘要由CSDN通过智能技术生成

拖拽时开始:dragstart 进行中:drag 结束:dragend
进入区域：进入时：dragenter 进入后：dragover 离开：dragleave 放置：drop

思路：开始拖拽时：给事件设置e.dataTransfer.set('XXXX',e.target.id)
取消进入后和放置的默认事件 e.preventDefault()
放置时获取元素id let data = e.dataTransfer.get('XXXX')
通过元素ID获取DOM 进行添加 e.target.appendChild(document.getElementById(data))

    <style>
        .start {
            height: 200px;
            width: 150px;
            background-color: pink;
        }

        .end {
            margin: 200px auto;
            height: 300px;
            width: 200px;
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <div class="start" draggable="true" id="123123"></div>
    <div class="end"></div>
    <script>
        let aaa = document.getElementsByClassName('start')[0]
        let end = document.getElementsByClassName('end')[0]
        aaa.addEventListener('dragstart', (e) => {
            e.dataTransfer.setData('DRAG_ID', e.target.id)
        }, false)

        end.addEventListener('dragover', (e) => {
            e.preventDefault()
        })
        end.addEventListener('drop', (e) => {
            e.preventDefault()
            let data = e.dataTransfer.getData('DRAG_ID')
            e.target.appendChild(document.getElementById(data))
        })


        // 拖动时 开始 dragstart  进行中drag  结束dragend
        //进入区域 进入时 dragenter  进入后 dragover  离开 dragleave  放置 drop
    </script>