拖拽API基础

AwyaW1217

已于 2024-02-02 11:32:51 修改

阅读量380

点赞数 11

文章标签：前端 javascript 开发语言

于 2024-02-01 22:44:48 首次发布

本文链接：https://blog.csdn.net/mooooonster_QG/article/details/135983165

版权

本文介绍了如何使用HTML、CSS和JavaScript实现可拖动元素，包括dragstart、dragover、drop和dragend等事件的监听和处理，以及dataTransfer对象的使用来控制拖放行为。

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

写一个可拖拽元素，了解拖拽API基础

<!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;
            }
            .drop-content {
                width: 200px;
                height: 200px;
                border: 2px dashed #000;
            }
            .drag-box {
                background-color: red;
                color: #fff;
                width: 100px;
                height: 100px;
            }
        </style>
    </head>
    <body>
        <div>
            <div class="drop-content">拖放区域</div>
            <div class="drag-box" draggable="true">拖拽元素</div>
        </div>
        <script>
            const dropContent = document.querySelector('.drop-content')
            const dragBox = document.querySelector('.drag-box')
            dragBox.addEventListener('dragstart', () => {
                console.log('开始拖拽')
            })
            // dragBox.addEventListener('drag', () => {
            //     console.log('拖拽过程中')
            // })
            dragBox.addEventListener('dragend', () => {
                console.log('拖拽结束')
            })
            dropContent.addEventListener('dragenter', () => {
                console.log('拖拽元素进入到目标区域')
            })
            dropContent.addEventListener('dragover', (e) => {
                e.preventDefault()
                console.log('拖拽元素在目标区域内拖拽')
            })
            dropContent.addEventListener('dragleave', () => {
                console.log('拖拽元素离开目标区域')
            })
            dropContent.addEventListener('drop', (e) => {
                // 影响后续操作
                e.preventDefault()
                console.log('拖拽元素在目标区域内释放')
            })
        </script>
    </body>
</html>

<input type="text"></input>

如图所示增加input标签后，"拖放区域"可拖拽至input框中

为了防止这种情况发生，需要增加监听drop事件，阻止drop事件

需要增加监听drop事件，其余元素拖拽时阻止drop事件

  document.querySelector('input').
       addEventListener('drop', function (e) {e.preventDefault()})

如图所示，增加阻止事件后，drop其余元素时input不会受影响

小练习：将红框拖进白框内部

<div class="drop-content"></div>
            <div class="drag-box" draggable="true">拖拽元素</div>

     const dropContent = document.querySelector('.drop-content')
            const dragBox = document.querySelector('.drag-box')
            // 其余元素可在白色框上方进行拖拽
            dropContent.addEventListener('dragover', (e) => {
                e.preventDefault()
                console.log('拖拽元素在目标区域内拖拽')
            })
            dropContent.addEventListener('drop', (e) => {
                // 释放后将红色框加进白框所属元素
                dropContent.appendChild(dragBox)
                console.log('拖拽元素在目标区域内释放')
            })

小练习：设置drop后的元素，删除原来拖拽元素，并修改拖拽指针下的小图标

dragBox.addEventListener('dragstart', (e) => {
    e.dataTransfer.setData('text/plain', '我是一个拖拽文本')
    e.dataTransfer.setData('text/html', '<p>我是一个拖拽文本</p>')
})
dropContent.addEventListener('dragover', (e) => {
    console.log('拖拽元素在目标区域内拖拽', e.dataTransfer)
    // 更改拖拽指针下的小图标
    e.dataTransfer.dropEffect = 'link'
    e.preventDefault()
})
dropContent.addEventListener('drop', (e) => {
    console.log('拖拽元素在目标区域内拖拽')
    dropContent.innerHTML = e.dataTransfer.getData('text/html')
    dragBox.remove()
})

AwyaW1217

关注

11
点赞
踩
10

收藏

觉得还不错? 一键收藏
1
评论
拖拽API基础

div class="drag-box" draggable="true">拖拽元素// 其余元素可在白色框上方进行拖拽console.log('拖拽元素在目标区域内拖拽')})// 释放后将红色框加进白框所属元素console.log('拖拽元素在目标区域内释放')})
复制链接

扫一扫