拖拽案例效果

最新推荐文章于 2024-07-11 17:05:07 发布

原创最新推荐文章于 2024-07-11 17:05:07 发布 · 165 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #css3 #前端

JS 专栏收录该内容

91 篇文章

订阅专栏

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

<!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>