浏览器的原生拖动行为draggable

最新推荐文章于 2024-10-02 12:33:47 发布

“蓬蒿人”

最新推荐文章于 2024-10-02 12:33:47 发布

阅读量491

点赞数

分类专栏：前端开发文章标签： html5 javascript css3 css html

本文链接：https://blog.csdn.net/challenge_study/article/details/131353936

版权

前端开发专栏收录该内容

9 篇文章

订阅专栏

文章介绍了如何使用HTML5的拖放API来实现元素的拖拽功能。通过监听dragstart、dragover和drop事件，结合CSS和JavaScript，可以创建一个允许用户拖动元素并将其放置到指定区域的交互效果。示例代码展示了一个简单的拖拽按钮到目标区域的实现。

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

最近在做一个流程图的时候，需要用到拖拽功能，在这里做个记录吧。

在做这个拖拽功能时我首先想到的是能不能用监听鼠标的按下、拖动、放开事件来实现，但是实际的效果不是特别的好，最终还是选择使用浏览器原生的拖动属性和事件来实现。

下面是一个简单的示例代码，把它复制在你的本地并运行感受一下效果吧。

<!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>
        .drag{
            width: 100%;
            height: 50px;
            background-color: #bfbfbf;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .btn{
            width: 50px;
            height: 30px;
            background-color: green;
            border:1px solid #fff;
            border-radius: 3px;
            text-align: center;
            line-height: 30px;
            color:#fff;
        }
        .btn:hover{
            cursor: pointer;
        }
        .put{
            width: 100%;
            height: 300px;
            border:1px solid #bfbfbf;
            position: absolute;
        }
    </style>
</head>
<body>
    <div class="drag" draggable>
        <div class="btn">测试</div>
    </div>
    <hr/>
    <div class="put"></div>

    <script>
        let drag = document.querySelector('.drag')
        let btn = document.querySelector('.btn')
        let put = document.querySelector('.put')
        
        //开始拖动，浏览器原生拖动draggable属性，默认是auto，如果没有设置表示默认使用浏览器的默认行为（具体属性介绍参考MDN文档内容）
        drag.addEventListener('dragstart',function(e){
            console.log('dragstart',e);
            e.dataTransfer.effectAllowed = 'move' //在开始拖动时将鼠标变为拖动的样式，不然的话默认是none的样式，（具体使用情况还请查阅MDN文档介绍）
        })

        //在需要拖入的标签哪里通过监听拖动中事件阻止一下原生事件
        put.addEventListener('dragover',function(e){
            console.log('dragover',e);
            e.preventDefault() //阻止一下原生事件
        })
        
        put.addEventListener('drop',function(e){
            console.log('drop',e);
            btn.style.position = 'absolute'
            btn.style.left = e.offsetX + 'px'
            btn.style.top = e.offsetY + 'px'
            put.appendChild(btn)
        })
    </script>
</body>
</html>