JavaScript

js事件高级:拖拽

Nick · 1月27日 · 2020年本文7441字 · 阅读19分钟464

什么是拖拽

拖拽就是在某一个对象上,当鼠标按下去之后,拖着对象走,松开鼠标时,对象位置变成拖拽的位置

简单拖拽

1.实现简单的拖拽功能
2.当拖拽对象到网页边缘时,会停留在边缘

实现代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            #box{
                width: 200px;
                height: 200px;
                background: #8A2BE2;
                position: absolute;
            }
        </style>
    </head>
    <body>
        <div id="box">

        </div>

        <script type="text/javascript">
            var oDiv=document.getElementById("box");
            var disX=0;
            var disY=0;
            oDiv.onmousedown=function(e){
                var oEvent =e||event;
                //鼠标距离在div中距离div左端和顶端的距离
                disX=oEvent.clientX-oDiv.offsetLeft;
                disY=oEvent.clientY-oDiv.offsetTop;
                //将鼠标移动事件都加在document上,防止鼠标走出div
                document.onmousemove=function(e){
                    var oEvent =e||event;
                    //div相对鼠标移动的左端距离和顶端距离
                    var l=oEvent.clientX-disX;
                    var t =oEvent.clientY-disY;
                    //判断div是否移处可视页面的边缘
                    if(l<0){
                        l=0;
                    }
                    //documentElement.clientWidth:可视区的宽度
                    else if(l>document.documentElement.clientWidth-oDiv.offsetWidth){
                        l=document.documentElement.clientWidth-oDiv.offsetWidth;
                    }
                    if(t<0){
                        t=0;
                    }
                    //documentElement.clientHeight:可视区的高度
                    else if(t>document.documentElement.clientHeight-oDiv.offsetHeight){
                        t=document.documentElement.clientHeight-oDiv.offsetHeight;
                    }
                    //设置div相对鼠标的距离
                    oDiv.style.left=l +"px";
                    oDiv.style.top=t+"px";
                };
                //鼠标松开之后将对象释放
                document.onmouseup=function(e){
                    document.onmousemove=null;
                    document.onmouseup=null;
                }
                return false;
            }
        </script>
    </body>
</html>

实现效果

在这里插入图片描述

完美拖拽_吸附

1.在实现简单拖拽的基础上给拖拽对象一个区域范围
2.拖拽吸附:在靠近父级边缘时自动吸附在父级边缘

实现代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            #box0 {
                width: 700px;
                height: 500px;
                background: lightgreen;
                position: relative;
                margin: 10px auto;
            }

            #box {
                width: 100px;
                height: 100px;
                background: #8A2BE2;
                position: absolute;
            }

        </style>
    </head>
    <body>
        <div id="box0">

            <div id="box"></div>
        </div>
        <script type="text/javascript">
            var oDiv = document.getElementById("box");
            var oDiv0 = document.getElementById("box0");
            var disX = 0;
            var disY = 0;
            oDiv.onmousedown = function(e) {
                var oEvent = e || event;
                //鼠标距离在div中距离div左端和顶端的距离
                disX = oEvent.clientX - oDiv.offsetLeft;
                disY = oEvent.clientY - oDiv.offsetTop;
                //将鼠标移动事件都加在document上,防止鼠标走出div

                // 判断兼容问题
                if (oDiv.setCapture) {

                    oDiv.onmousemove = mouseMove;
                    oDiv.onmouseup = mouseUp;
                    //iE8一下对拖拽会有不兼容,所以要用到捕获
                    //设定一个捕获:将所有的事件全部放在oDiv上
                    oDiv.setCapture();
                    return false; //足以解决chorm ff IE9的问题
                } else {
                    document.onmousemove = mouseMove;
                    document.onmouseup = mouseUp;
                    //iE8一下对拖拽会有不兼容,所以要用到捕获
                    //设定一个捕获:将所有的事件全部放在oDiv上
                    // oDiv.setCapture();
                    return false; //足以解决chorm ff IE9的问题
                }
            }

            function mouseMove(e) {
                var oEvent = e || event;
                //div相对鼠标移动的左端距离和顶端距离
                var l = oEvent.clientX - disX;
                var t = oEvent.clientY - disY;
                //判断div是否移处可视页面的边缘
                //拖拽靠近父级边缘时自动吸附
                if (l < 50) {
                    l = 0;
                }
                //documentElement.clientWidth:可视区的宽度
                else if (l > oDiv0.offsetWidth - oDiv.offsetWidth) {
                    l = oDiv0.offsetWidth - oDiv.offsetWidth;
                }
                if (t < 50) {
                    t = 0;
                }
                //documentElement.clientHeight:可视区的高度
                else if (t > oDiv0.offsetHeight - oDiv.offsetHeight) {
                    t = oDiv0.offsetHeight - oDiv.offsetHeight;
                }
                //设置div相对鼠标的距离
                oDiv.style.left = l + "px";
                oDiv.style.top = t + "px";

            };

            function mouseUp(e) {
                this.onmousemove = null;
                this.onmouseup = null;
                //鼠标松开时,释放捕获
                if(oDiv.releaseCapture){![在这里插入图片描述](https://img-blog.csdnimg.cn/20190804091315102.gif)
                    oDiv.releaseCapture();
                }

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

实现效果

在这里插入图片描述

带框拖拽

带框拖拽是拖拽的另一种形式,拖动时,跟着移动的是对象的虚线框,虚线框就是对象将要拖移到达的位置

实现代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            #box0 {
                width: 700px;
                height: 500px;
                background: lightgreen;
                position: relative;
                margin: 10px auto;
            }

            #box {
                width: 100px;
                height: 100px;
                background: #8A2BE2;
                position: absolute;
            }
            /* 虚线框 */
            .box1 {
                border: #000000 1px dashed;
                position: absolute;
            }
        </style>
    </head>
    <body>
        <div id="box0">

            <div id="box"></div>
        </div>
        <script type="text/javascript">
            var oDiv = document.getElementById("box");
            var oDiv0 = document.getElementById("box0");
            var disX = 0;
            var disY = 0;
            oDiv.onmousedown = function(e) {
                var oEvent = e || event;
                //鼠标距离在div中距离div左端和顶端的距离
                disX = oEvent.clientX - oDiv.offsetLeft;
                disY = oEvent.clientY - oDiv.offsetTop;

                //没有用var声明的变量就是全局变量
                oBox=document.createElement('div');
                oBox.className='box1';
                oBox.style.width=oDiv.offsetWidth-2+"px";
                oBox.style.height=oDiv.offsetHeight-2+"px";
                oBox.style.left=oDiv.offsetLeft+"px";
                oBox.style.top=oDiv.offsetTop+"px";
                oDiv0.appendChild(oBox);

                // 判断兼容问题
                if (oDiv.setCapture) {

                    oDiv.onmousemove = mouseMove;
                    oDiv.onmouseup = mouseUp;
                    //iE8一下对拖拽会有不兼容,所以要用到捕获
                    //设定一个捕获:将所有的事件全部放在oDiv上
                    oDiv.setCapture();
                    return false; //足以解决chorm ff IE9的问题
                } else {
                    //将鼠标移动事件都加在document上,防止鼠标走出div
                    document.onmousemove = mouseMove;
                    document.onmouseup = mouseUp;
                    //iE8一下对拖拽会有不兼容,所以要用到捕获
                    //设定一个捕获:将所有的事件全部放在oDiv上
                    // oDiv.setCapture();
                    return false; //足以解决chorm ff IE9的问题
                }
            }

            function mouseMove(e) {
                var oEvent = e || event;
                //div相对鼠标移动的左端距离和顶端距离
                var l = oEvent.clientX - disX;
                var t = oEvent.clientY - disY;
                //判断div是否移处可视页面的边缘
                //拖拽靠近父级边缘时自动吸附
                if (l < 50) {
                    l = 0;
                }
                //documentElement.clientWidth:可视区的宽度
                else if (l > oDiv0.offsetWidth - oDiv.offsetWidth) {
                    l = oDiv0.offsetWidth - oDiv.offsetWidth;
                }
                if (t < 50) {
                    t = 0;
                }
                //documentElement.clientHeight:可视区的高度
                else if (t > oDiv0.offsetHeight - oDiv.offsetHeight) {
                    t = oDiv0.offsetHeight - oDiv.offsetHeight;
                }
                //设置div相对鼠标的距离
                oBox.style.left = l + "px";
                oBox.style.top = t + "px";

            };

            function mouseUp(e) {
                this.onmousemove = null;
                this.onmouseup = null;
                //鼠标松开时,释放捕获
                if (oDiv.releaseCapture) {
                    oDiv.releaseCapture();
                }
                //鼠标松开的时候虚线框消失
                oDiv.style.left=oBox.offsetLeft+"px";
                oDiv.style.top=oBox.offsetTop+"px";
                oDiv0.removeChild(oBox);

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

实现效果

在这里插入图片描述

自定义滚动条

自定义滚动条是利用拖拽的功能实现滚动条的功能
下面的案例实现了
1.利用自定义滚动条改变div的大小
2.利用自定义滚动条改变div的透明度

实现代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            #parent1 {
                width: 500px;
                height: 20px;
                background: #CCCCCC;
                position: relative;
                margin: 10px auto;
                display: inline-block;
                top: 12px;
                left: 50px;
            }

            #div1 {
                width: 20px;
                height: 20px;
                position: absolute;
                background: #8A2BE2;
                right: 0px;
                top: 0;
            }

            #parent2 {
                width: 500px;
                height: 20px;
                background: #CCCCCC;
                position: relative;
                margin: 10px auto;
                display: inline-block;
                top: 12px;
                left: 33px;

            }

            #div2 {
                width: 20px;
                height: 20px;
                position: absolute;
                background: #ADFF2F;
                right: 0;
                top: 0;
            }

            #div0 {
                width: 400px;
                height: 400px;
                /* 兼容 */
                filter: alpha(opacity:100);
                opacity: 1;
                background-color: darkorange;
                margin: 20px auto;
            }
        </style>
    </head>
    <body>
        改变大小:
        <div id="parent1">
            <div id="div1"></div>
        </div><br>
        改变透明度:
        <div id="parent2">
            <div id="div2"></div>
        </div>
        <div id="div0">

        </div>

        <script type="text/javascript">
            var oDiv1 = document.getElementById("div1");
            var oDiv0 = document.getElementById("div0");
            var oDiv2 = document.getElementById("div2");
            var oParent1 = document.getElementById("parent1");
            var oParent2 = document.getElementById("parent2");
            var disX = 0;
            oDiv1.onmousedown = function(e) {
                var oEvent = e || event;
                //鼠标距离在div中距离div左端和顶端的距离
                disX = oEvent.clientX - oDiv1.offsetLeft;
                //将鼠标移动事件都加在document上,防止鼠标走出div
                document.onmousemove = function(e) {
                    var oEvent = e || event;
                    //div相对鼠标移动的左端距离和顶端距离
                    var l = oEvent.clientX - disX;

                    //判断div是否移处可视页面的边缘
                    if (l < 0) {
                        l = 0;
                    }
                    //documentElement.clientWidth:可视区的宽度
                    else if (l > oParent1.offsetWidth - oDiv1.offsetWidth) {
                        l = oParent1.offsetWidth - oDiv1.offsetWidth;
                    }
                    //设置div相对鼠标的距离
                    oDiv1.style.left = l + "px";
                    var scale = l / (oParent1.offsetWidth - oDiv1.offsetWidth);

                    //改变oDiv2的大小
                    oDiv0.style.width = 400 * scale + "px";
                    oDiv0.style.height = 400 * scale + "px";
                };
                document.onmouseup = function(e) {
                    document.onmousemove = null;
                    document.onmouseup = null;
                }
                return false;
            }
            oDiv2.onmousedown = function(e) {
                var oEvent = e || event;
                //鼠标距离在div中距离div左端和顶端的距离
                disX = oEvent.clientX - oDiv2.offsetLeft;
                //将鼠标移动事件都加在document上,防止鼠标走出div
                document.onmousemove = function(e) {
                    var oEvent = e || event;
                    //div相对鼠标移动的左端距离和顶端距离
                    var l = oEvent.clientX - disX;

                    //判断div是否移处可视页面的边缘
                    if (l < 0) {
                        l = 0;
                    }
                    //documentElement.clientWidth:可视区的宽度
                    else if (l > oParent2.offsetWidth - oDiv2.offsetWidth) {
                        l = oParent2.offsetWidth - oDiv2.offsetWidth;
                    }
                    //设置div相对鼠标的距离
                    oDiv2.style.left = l + "px";
                    var scale = l / (oParent2.offsetWidth - oDiv2.offsetWidth);

                    //改变oDiv2的透明度
                    oDiv0.style.opacity = scale;
                    oDiv0.style.filter = "alpha(opacity:" + scale * 100 + ")";
                };
                document.onmouseup = function(e) {
                    document.onmousemove = null;
                    document.onmouseup = null;
                }
                return false;
            }
        </script>
    </body>
</html>

实现效果

js事件高级:拖拽-左眼会陪右眼哭の博客
(ps:本次学习就到这里,喜欢的话点赞关注哦 ^ _ ^ )

0 条回应
在线人数:1人
隐藏