原生js鼠标拖拽div左右滑动

一时失言乱红尘 2022-05-27 06:54 210阅读 0赞

![2018041314472714][]

![20180413144737216][]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="js/jquery.min.js"></script>
        <style>
            body{
                position: relative;
                margin:0;
                padding:0;
                width:100%;
                height: 1000px;
            }
            #box{
                height: 50px;
                width:200px;
                position: absolute;
                left:50%;
                top:50%;
                margin-left:-200px;
                margin-top:-200px;
                background: #CDCDCD;
            }
            #small-box{
                height: 50px;
                width:50px;
                position: absolute;
                left:0;
                top:0;
                background: #FF66CC;
                cursor:move ;
                opacity: 0.7;
            }
        </style>
    </head>
    <body>
        <div id="box">
            <div id="small-box"></div>
        </div>
    <script>
        var box=$("#small-box");
        var body=$('body');
        var index=0;
        var x1;
        box.mousedown(function(){
            index=1;              //鼠标按下才能触发onmousemove方法
            var x=event.clientX;     //鼠标点击的坐标值，x
            var left= this.style.left;
            left=left.substr(0,left.length-2);   //去掉px
            x1=parseInt(x-left);
        });
        box.mousemove(function(){
            if(index===1){
                this.style.left=event.clientX-x1+'px';
                if(this.style.left.substr(0,this.style.left.length-2)<0){
                    this.style.left=0;
                };
                if(this.style.left.substr(0,this.style.left.length-2)>150){
                    this.style.left='150px';
                };
            }
        });
        box.mouseup(function(){
            index=0;
        });
        body.mouseup(function(){
            index=0;
        });
    </script>
    </body>
    </html>

[2018041314472714]: /images/20220527/66e4457e58624c77801fd0856e4464fb.png
[20180413144737216]: /images/20220527/8d076f89fb8d4eb7aab24c4fe337b051.png