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