其他分享
首页 > 其他分享> > js监听鼠标拖动事件(按住左键拖动触发,松开左键取消)

js监听鼠标拖动事件(按住左键拖动触发,松开左键取消)

作者:互联网

 此段代码,实现了左键点击id元素内区域后,拖动鼠标到边缘区域滚动条(内部class元素的滚动条)自动滚动,松开鼠标后取消事件

业务需要记录一下

$(function () {
        var div=document.getElementById("元素id");
        div.onmousedown=function(e){
               document.onmousemove=function(e){
                   var xx=e.clientX || e.clientx ||0;
                var yy=e.clientY || e.clienty ||0;
                //首先获得鼠标位置坐标
                var T1=yy;
                var L1=xx;
                //然后设置该两个差值的筏值 T1max T1min L1max L1min;
                //.content为元素id下的子元素,实际想监听这个class,由于js监听id比较方便,改为了监听带id的父元素
                var T1max= $(".content").height()*0.95;
                var T1min= $(".content").height()*0.5;
                var L1max= $(".content").width()*0.95;
                var L1min= $(".content").width()*0.3;
                //当T1 大于 T1max 或者小于 T1min 时,触发滚动条动作,变化速度为 T1 与 筏值的差值(每秒) [滑动效果另议]
                if(T1>T1max) $(".content").scrollTop( $(".content").scrollTop()+T1-T1max);
                if(T1<T1min) $(".content").scrollTop( $(".content").scrollTop()+T1-T1min);
                //同上,处理L1
                if(L1>L1max) $(".content").scrollLeft( $(".content").scrollLeft()+L1-L1max);
                if(L1<L1min) $(".content").scrollLeft( $(".content").scrollLeft()+L1-L1min);
                
               };
               document.onmouseup=function(){
                   document.onmouseup=null;
                   document.onmousemove=null;
               };
         };
    });

标签:T1max,鼠标,js,content,var,T1,id,左键,键拖动
来源: https://blog.csdn.net/weixin_38008837/article/details/120563543