实现前端拖拽效果的实战教程-优快云博客

本文链接：https://blog.youkuaiyun.com/tianranran/article/details/121844066

本文详细介绍了如何使用JavaScript和CSS3在前端实现拖拽功能。通过创建事件监听器，捕捉鼠标移动和释放事件，结合元素定位，成功创建了一个交互式的拖拽案例。读者将学习到关键的代码实现和技巧，提升前端交互开发能力。

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

<!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>拖拽效果</title>
    <style>
        div{
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: cadetblue;
        }
    </style>

    <!-- 

        拖拽效果
           =>鼠标左键按在区块上面，移动，区块随着移动
             
            1. 让区块移动，
                 => 将光标坐标位置赋值给区块

            2. 按下状态
                isMove 

            3. 光标点中区块那个位置，停止移动之后，光标就在区块那个位置

            
             


     -->
</head>
<body>
    <div></div>

    <script>
        var divEle = document.querySelector('div')
        var l = 0 //左边距
        var t = 0 //上边距
        var isMove = false //是否允许移动
        divEle.addEventListener('mousedown',function(e){
            e = e || window.event //事件对象
            isMove = true
            l = e.offsetX
            t = e.offsetY
        })

        document.addEventListener('mousemove',function(e){
            //检查是否按住区块
            if(!isMove){
                return
            }

            e = e || window.event //事件对象
            var x = e.clientX - l
            var y = e.clientY - t

            divEle.style.top = y + 'px'
            divEle.style.left = x + 'px'
        })

        document.addEventListener('mouseup',function(){
            isMove = false
        })


    </script>
</body>
</html>

拖拽案例效果