javascript 拖拽移动滚动条

Posted 2023-04-07

现在做了一个产品的追溯界面，在触屏终端上使用的时候，触摸屏定位及其不准，无法拖动滚动条，所以想用javascript写一个按下左键拖动界面的功能，类似于触屏手机那种，在随意位置按住不放就能拖动页面的感觉，希望各位javascript脚本大神不吝赐教。：）
就是说触屏的定位非常之飘忽不定，所以滚动条基本是装饰，所以想通过一个脚本能实现鼠标左键按下后上下移动鼠标从而达到移动页面，也就是上下移动滚动条的效果，二楼的谢谢你，期待更好的方法,三楼的，说了触摸不准，要触摸精确我还那么费力做这个来折腾干嘛

参考技术A <script type="text/javascript">
var _y;
var scrolling=false;
document.onmousedown=function(e)
var e = window.event || e;
_y = e.clientY;
scrolling=true;
;
document.onmousemove = function(e)
if(!scrolling) return;
var e = window.event || e;
document.body.style.cursor="move";
var move=(e.clientY-_y)/10;
var scrollTop=document.body.scrollTop + document.documentElement.scrollTop;
window.scrollTo(0,scrollTop+move);
;
document.onmouseup=function()
scrolling=false;
document.body.style.cursor="default";
;
</script>

不足是会选中文字- -！本回答被提问者采纳 参考技术B 滚轮不是很好么。。。

拖拽图片小项目

1.布局

一个ul里面放几个li，li里面放图片，li要设置成absolute。

2.获取数据

获取每个li距浏览器顶部和左部距离并放入aPos数组中。

给每个li添加一个自定义属性index，li在ul中的位置。

3.拖拽事件

当鼠标移动到某元素上时，将cursor改成可移动。

当鼠标按下时，获取滚动条距浏览器顶部和左部的距离，然后计算鼠标与拖拽对象的距离。

当鼠标移动时，li随鼠标移动，找到距当前li最近的li，并去掉其他li的class，为最近的li添加高亮，

　　如何找到最近的li？

　　将此li与每个li比较，检查是否碰撞。如果碰撞了，获取两者的距离，然后如果比当前的最小距离小，就将最小距离设置为此距离。

当鼠标按键松开时，清空mousemove和mouseup事件，找到最近的li，将2个li交换位置(换为li本来的位置)，交换index。如果没有找到最近的li，就将此li的位置设置为移动前的位置。

部分代码：

交换index

oNear.index += obj.index;
obj.index = oNear.index - obj.index;
oNear.index = oNear.index - obj.index;

检测2个li有没有碰撞到

function colTest(obj1,obj2){
var t1 = obj1.offsetTop;//元素距顶部距离
var r1 = obj1.offsetWidth+obj1.offsetLeft;//offsetWidth元素宽度，包括不可见部分
var b1 = obj1.offsetHeight+obj1.offsetTop;
var l1 = obj1.offsetLeft;

var t2 = obj2.offsetTop;
var r2 = obj2.offsetWidth+obj2.offsetLeft;
var b2 = obj2.offsetHeight+obj2.offsetTop;
var l2 = obj2.offsetLeft;

if(t1>b2||r1<l2||b1<t2||l1>r2){//检查2个图片有没有碰到
return false;
}else{
return true;
}
}

勾股定理求2个li的距离

function getDis(obj1,obj2){
var a = obj1.offsetLeft-obj2.offsetLeft;
var b = obj1.offsetTop-obj2.offsetTop;
return Math.sqrt(Math.pow(a,2)+Math.pow(b,2));
}