拖拽的实现——JS

最新推荐文章于 2024-09-21 20:10:09 发布

_洋

最新推荐文章于 2024-09-21 20:10:09 发布

阅读量2.5k

点赞数 2

分类专栏： JavaScript 文章标签： js

本文链接：https://blog.csdn.net/mantou_riji/article/details/124038975

版权

JavaScript 专栏收录该内容

52 篇文章 7 订阅

订阅专栏

文章目录

拖拽的流程
实现div的点击拖拽：

拖拽的流程

当鼠标在被拖拽元素上按下时，开始拖拽（onmousedown）

当鼠标移动时被拖拽元素跟随鼠标移动（onmousemove）

当鼠标松开时,被拖拽元素固定在当前位置（onmouseup）

在这里插入图片描述

实现div的点击拖拽：

注意：要想使对象移动一定要对对象开启绝对定位。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #box1{
            width: 100px;
            height: 100px;
            background-color: purple;
             /* 开启定位才能移动 !!!!!!!!!!*/
            position: absolute;
        }
        #box2{
            width: 100px;
            height: 100px;
            background-color: rgb(180, 142, 180);
            left: 200px;
            top: 200px;
            position: absolute;
        }

    </style>
    <script>
        window.onload = function(){
            var box1 = document.getElementById("box1");
            // 鼠标按下函数
            box1.onmousedown = function(event){
                event = event || window.event;

                // 调整鼠标和div的位置问题
                // div的偏移量=鼠标.clentx -元素.offsetLeft
                // div的偏移量=鼠标.clentY -元素.offsetTop
                var ol = event.clientX - box1.offsetLeft;
                var ot = event.clientY - box1.offsetTop;

                // onmousemove应该在onmousedown里面，点击之后才会进行拖拽
                //鼠标移动函数： 为document绑定onmousemove
                document.onmousemove = function(event){
                event = event || window.event;
                var scrollTop = document.body.scrollTop||document.documentElement.scrollTop;
                var scrollLeft = document.body.scrollLeft||document.documentElement.scrollLeft;
            
                var left = event.clientX+scrollLeft - ol;
                var top = event.clientY+scrollTop - ot;
                
                //设置 box1的位置
                box1.style.left = left +"px";
                box1.style.top = top+ "px";
                };

                // 鼠标松开:  为document绑定onmouseup
                document.onmouseup = function(){
                    // 直接取消doument的onmousemove事件
                    document.onmousemove = null;
                     // 直接取消doument的onmouseup事件
                    //  防止鼠标在其大地放松改的时候也触发该函数
                    document.onmouseup = null;
                    // alert("鼠标松开了");

                }
            };
        };
    </script>
</head>
<body>
    <div id="box1"></div>
    <div id="box2"></div>
</body>
</html>

问题

当我们拖拽一个网页中的内容时，浏览器会默认去搜索引擎中搜索内容，此时会导致拖拽功能的异常

这个是浏览器提供的默认行为，如果不希望发生这个行为，则可以通过return false来取消默认行为。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #box1{
            width: 100px;
            height: 100px;
            background-color: purple;
             /* 开启定位才能移动 !!!!!!!!!!*/
            position: absolute;
        }
        #box2{
            width: 100px;
            height: 100px;
            background-color: rgb(180, 142, 180);
            left: 200px;
            top: 200px;
            position: absolute;
        }

    </style>
    <script>
        window.onload = function(){
            var box1 = document.getElementById("box1");
            // 鼠标按下函数
            box1.onmousedown = function(event){
                event = event || window.event;

                // 调整鼠标和div的位置问题
                // div的偏移量=鼠标.clentx -元素.offsetLeft
                // div的偏移量=鼠标.clentY -元素.offsetTop
                var ol = event.clientX - box1.offsetLeft;
                var ot = event.clientY - box1.offsetTop;

                // onmousemove应该在onmousedown里面，点击之后才会进行拖拽
                //鼠标移动函数： 为document绑定onmousemove
                document.onmousemove = function(event){
                event = event || window.event;
                var scrollTop = document.body.scrollTop||document.documentElement.scrollTop;
                var scrollLeft = document.body.scrollLeft||document.documentElement.scrollLeft;
            
                var left = event.clientX+scrollLeft - ol;
                var top = event.clientY+scrollTop - ot;
                
                //设置 box1的位置
                box1.style.left = left +"px";
                box1.style.top = top+ "px";
                };

                // 鼠标松开:  为document绑定onmouseup
                document.onmouseup = function(){
                    // 直接取消doument的onmousemove事件
                    document.onmousemove = null;
                     // 直接取消doument的onmouseup事件
                    //  防止鼠标在其大地放松改的时候也触发该函数
                    document.onmouseup = null;
                    // alert("鼠标松开了");
                };
                /*
                当我们拖拽一个网页中的内容时，浏览器会默认去搜索引擎中搜索内容，此时会导致拖拽功能的异常.
                这个是浏览器提供的默认行为，如果不希望发生这个行为，则可以通过return false来取消默认行为。
                */
                return false;
            };
        };
    </script>
</head>
<body>
    <p>我是一段文字</p>
    <div id="box1"></div>
    <div id="box2"></div>
</body>
</html>

但是对IE8不起作用

IE8：需要使用如下方法：

当调用一个元素的setCapture()方法以后，这个元素将会把下一次所有的鼠标按下相关的事件捕获到自身上。

eg：btn1.setCapture();

releaseCapture()是取消事件得捕获。

setCapture()只有IE浏览器支持，chrome执行会报错所以要添加一个判断语句

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #box1{
            width: 100px;
            height: 100px;
            background-color: purple;
             /* 开启定位才能移动 !!!!!!!!!!*/
            position: absolute;
        }
        #box2{
            width: 100px;
            height: 100px;
            background-color: rgb(180, 142, 180);
            left: 200px;
            top: 200px;
            position: absolute;
        }

    </style>
    <script>
        window.onload = function(){
            var box1 = document.getElementById("box1");
            // 鼠标按下函数
            box1.onmousedown = function(event){
                event = event || window.event;

                // 鼠标点击时对事件进行捕获
                // if(box1.setCapture){
                //      box1.setCapture();
                // }
            // 可以简写为
             box1.setCapture && box1.setCapture();

                

                // 调整鼠标和div的位置问题
                // div的偏移量=鼠标.clentx -元素.offsetLeft
                // div的偏移量=鼠标.clentY -元素.offsetTop
                var ol = event.clientX - box1.offsetLeft;
                var ot = event.clientY - box1.offsetTop;

                // onmousemove应该在onmousedown里面，点击之后才会进行拖拽
                //鼠标移动函数： 为document绑定onmousemove
                document.onmousemove = function(event){
                event = event || window.event;
                var scrollTop = document.body.scrollTop||document.documentElement.scrollTop;
                var scrollLeft = document.body.scrollLeft||document.documentElement.scrollLeft;
            
                var left = event.clientX+scrollLeft - ol;
                var top = event.clientY+scrollTop - ot;
                
                //设置 box1的位置
                box1.style.left = left +"px";
                box1.style.top = top+ "px";
                };

                // 鼠标松开:  为document绑定onmouseup
                document.onmouseup = function(){
                    // 直接取消doument的onmousemove事件
                    document.onmousemove = null;
                     // 直接取消doument的onmouseup事件
                    //  防止鼠标在其大地放松改的时候也触发该函数
                    document.onmouseup = null;
                    // alert("鼠标松开了");

                    //鼠标松开时，取消对事件捕获 
                    box1.releaseCapture&&box1.releaseCapture();
                };

             return false;
            };
        };
    </script>
</head>
<body>
    <p>我是一段文字</p>
    <div id="box1"></div>
    <div id="box2"></div>
</body>
</html>

设置box2也能移动

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #box1{
            width: 100px;
            height: 100px;
            background-color: purple;
             /* 开启定位才能移动 !!!!!!!!!!*/
            position: absolute;
        }
        #box2{
            width: 100px;
            height: 100px;
            background-color: rgb(180, 142, 180);
            left: 200px;
            top: 200px;
            position: absolute;
        }

    </style>
    <script>
        window.onload = function(){
            var box1 = document.getElementById("box1");
            var box2 = document.getElementById("box2");
            drag(box1);
            drag(box2);
            


            // drag:移动函数；obj:对象 
            function drag(obj){

               // 鼠标按下函数
               obj.onmousedown = function(event){
                event = event || window.event;

                // 鼠标点击时对事件进行捕获
                // if(box1.setCapture){
                //      box1.setCapture();
                // }
            // 可以简写为
             obj.setCapture && obj.setCapture();

                

                // 调整鼠标和div的位置问题
                // div的偏移量=鼠标.clentx -元素.offsetLeft
                // div的偏移量=鼠标.clentY -元素.offsetTop
                var ol = event.clientX - obj.offsetLeft;
                var ot = event.clientY - obj.offsetTop;

                // onmousemove应该在onmousedown里面，点击之后才会进行拖拽
                //鼠标移动函数： 为document绑定onmousemove
                document.onmousemove = function(event){
                event = event || window.event;
                var scrollTop = document.body.scrollTop||document.documentElement.scrollTop;
                var scrollLeft = document.body.scrollLeft||document.documentElement.scrollLeft;
            
                var left = event.clientX+scrollLeft - ol;
                var top = event.clientY+scrollTop - ot;
                
                //设置 box1的位置
                obj.style.left = left +"px";
                obj.style.top = top+ "px";
                };

                // 鼠标松开:  为document绑定onmouseup
                document.onmouseup = function(){
                    // 直接取消doument的onmousemove事件
                    document.onmousemove = null;
                     // 直接取消doument的onmouseup事件
                    //  防止鼠标在其大地放松改的时候也触发该函数
                    document.onmouseup = null;
                    // alert("鼠标松开了");

                    //鼠标松开时，取消对事件捕获 
                    box1.releaseCapture&&box1.releaseCapture();

                };

             return false;
            };

            }

        };
    </script>
</head>
<body>
    <div id="box1"></div>
    <div id="box2"></div>
</body>
</html