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;
               };
         };
    });

  • 6
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值