通过js实现鼠标拖拽div进行横向滑动

2021-01-28 代码工坊王小毛前端技术

通过js实现鼠标拖拽div进行横向滑动

通过js实现鼠标点击拖拽div时实现div在容器内左右滑动，代码如下：

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="utf-8" />  
        <title></title>  
        <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js" type="text/javascript" charset="utf-8"></script> 
    </head>  

    <body>  

        <div id="pic" style="width:10000px;height:300px;font-size:100px;">
getY和getX同样道理，这两个差值就是鼠标相对于对象的定位，因为拖拽后鼠标和拖拽对象的相对位置是不变的
        </div>
        <script type="text/javascript">  
            var drag=function(obj){  

                obj.bind("mousedown",start);  

                function start(event){  
                    if(event.button==0){//判断是否点击鼠标左键  
                        gapX=event.clientX;
                        startx = $(window).scrollLeft();  // scroll的初始位置

                        //movemove事件必须绑定到$(document)上，鼠标移动是在整个屏幕上的  
                        $(document).bind("mousemove",move);  
                        //此处的$(document)可以改为obj  
                        $(document).bind("mouseup",stop);                           
                    }  
                    return false;//阻止默认事件或冒泡  
                }  
                function move(event){  
                    var left = event.clientX-gapX; // 鼠标移动的相对距离

                    $(window).scrollLeft(startx - left );

                    return false;//阻止默认事件或冒泡  
                }  
                function stop(){  
                    //解绑定，这一步很必要，前面有解释  
                    $(document).unbind("mousemove",move);  
                    $(document).unbind("mouseup",stop);  
                }  
            }  
            obj=$("#pic");  
            drag(obj);//传入的必须是jQuery对象，否则不能调用jQuery的自定义函数  
        </script>  
    </body>  
</html>

目前代码中是window也就是整个窗口为外部容器，我们也可以将$(window)改为绑定到当前的外部容器id，就可以实现我们的最终效果，效果如下：

通过js实现鼠标拖拽div进行横向滑动