13.鼠标拖拽：案例:鼠标拖拽小方块，小方格跟着移动（桌面图标拖动）

最新推荐文章于 2022-03-03 18:18:51 发布

美美| ू•ૅω•́)ᵎᵎᵎ

最新推荐文章于 2022-03-03 18:18:51 发布

阅读量1.4k

点赞数

分类专栏： DOM 文章标签： html5 javascript html

本文链接：https://blog.csdn.net/lazylYYY/article/details/119700258

版权

DOM 专栏收录该内容

15 篇文章 3 订阅

订阅专栏

一：案例鼠标拖拽小方块，小方格跟着移动（桌面图标拖动）

如果有好多个小盒子要做拖拽，一个一个加上面的1，2，3步太麻烦，升级版如下：

想法：①把所有onmousedown/onmousemove/onmouseup修改为addEventListener()

②希望页面中的元素只要含有drag这个class的就可以被拖拽

一：案例鼠标拖拽小方块，小方格跟着移动（桌面图标拖动）

<!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>Document</title>
    <style>
        #box {
            width: 100px;
            height: 100px;
            background-color: pink;
            position: absolute;
        }

        #a {
            width: 100px;
            height: 100px;
            background-color: black;
            position: absolute;
            top: 100px;
            left: 100px;
        }
    </style>
</head>

<body>
    <div id="box"></div> <!-- 第二个盒子测试第三步的鼠标松开时应该给document添加事件，而不是box -->
    <div id="a"></div>
    <script>
        /* 
           通过鼠标，拖拽box移动
                  1.当鼠标在box1上按下时，功能开始 （mousedown）
                  2.鼠标移动，box跟随鼠标一起移动  （mousemove）
                  3.鼠标松开，功能结束，           （mouseup）
                      box1固定在当前位置不再跟随鼠标移动
        
        */
        let box = document.getElementById('box')
        //1.当鼠标在box1上按下时，功能开始（mousedown）
        box.onmousedown = function (event2) {
            let left = event2.clientX - box.offsetLeft;
            let top = event2.clientY - box.offsetTop;
            //2.鼠标移动，box跟随鼠标一起移动（mousemove）
            document.onmousemove = function (event) {
                box.style.left = event.clientX - left + 'px'
                box.style.top = event.clientY - top + 'px'
            }

            //3.鼠标松开，功能结束（mouseup） 
            //第二步的事件取消了，小方块就不会移动了
            document.onmouseup = function () {
                document.onmousemove = null;
            }
        }
    </script>
</body>

</html>

二：取消拖拽文字的行为

就是取消文字拖拽...

1.没取消前：

2.取消后：

三：鼠标拖拽案例优化：

如果有好多个小盒子要做拖拽，一个一个加上面的1，2，3步太麻烦，升级版如下：

想法：①把所有onmousedown/onmousemove/onmouseup修改为addEventListener()

②希望页面中的元素只要含有drag这个class的就可以被拖拽

<!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>Document</title>
    <style>
        #box1,
        #box2,
        #box3 {
            width: 100px;
            height: 100px;
            background-color: pink;

        }

        /*添加拖动事件的盒子添加定位来移动  */
        .drag {
            position: absolute;
        }

        #a {
            width: 100px;
            height: 100px;
            background-color: black;
            position: absolute;
            top: 100px;
            left: 100px;
        }

        #box2 {
            top: 200px;
            background-color: rgb(109, 6, 140);
        }

        #box3 {
            left: 200px;
            background-color: rgb(179, 233, 31);
        }
    </style>
</head>

<body>
    取消文字拖拽
    <div id="box1" class="drag"></div> <!-- 第二个盒子测试第三步的鼠标松开时应该给document添加事件，而不是box -->
    <div id="a"></div>
    <!-- 我们都需要设置拖拽效果 -->
    <div id="box2" class="drag"></div>
    <div id="box3" class="drag"></div>
    <script>
        /* 
           通过鼠标，拖拽box移动
                  1.当鼠标在box1上按下时，功能开始 （mousedown）
                  2.鼠标移动，box跟随鼠标一起移动  （mousemove）
                  3.鼠标松开，功能结束，           （mouseup）
                      box1固定在当前位置不再跟随鼠标移动
        
        */
        // 二：方别的拖拽设置
        /*
                        如果有好多个小盒子要做拖拽，一个一个加上面的1，2，3步太麻烦，升级版如下：
                        想法：①把所有onmousedown/onmousemove/onmouseup修改为addEventListener()
                              ②希望页面中的元素只要含有drag这个class的就可以被拖拽
                        */
        (function () {
            let drags = null;
            let left;
            let top;

            let box1 = document.getElementById('box1')
            let box2 = document.getElementById('box2')
            let box3 = document.getElementById('box3')
            //1.当鼠标在box1上按下时，功能开始（mousedown）
            document.addEventListener('mousedown', function (event1) {
                if (event.target.classList.contains('drag')) {
                    event.preventDefault();
                    drags = event.target;
                    left = event1.clientX - drags.offsetLeft;
                    top = event1.clientY - drags.offsetTop;
                }
            })
            //2.鼠标移动，box跟随鼠标一起移动（mousemove）
            document.addEventListener('mousemove', function (event2) {
                if (drags) {
                    drags.style.left = event2.clientX - left + 'px';
                    drags.style.top = event2.clientY - top + 'px';
                }
            })
            //3.鼠标松开，功能结束（mouseup）
            //第二步的事件取消了，小方块就不会移动了
            document.addEventListener('mouseup', function () {
                drags = null
            })
        })()
    </script>
</body>

</html>

美美| ू•ૅω•́)ᵎᵎᵎ

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
13.鼠标拖拽：案例:鼠标拖拽小方块，小方格跟着移动（桌面图标拖动）

一：案例鼠标拖拽小方块，小方格跟着移动（桌面图标拖动）<!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-sc
复制链接

扫一扫