一，js代码
<html>
<head>
<meta charset="utf-8"/>
<title>测试</title>
</head>
<body onm ousemove="divmousemoving()" onm ouseUp="divmouseup()">
<div style="margin: auto;position: absolute;top: 100px;left: 50%;transform: translateX( -50% );">
<div style="width:700px;height:50px;background: #ffff00;position: relative;" >
<!--可以拖动的按钮 begin-->
<div id="btn" style="width:50px;height:50px;border-radius: 25px;background: #ff0000;position: absolute;left:-25px;"
onmousedown="divmousedown()"></div>
<!--可以拖动的按钮 end-->
</div>
</div>
<script>
//拖动开始时的位置x,y
var x = 0;
var y = 0;
//拖动开始时的偏移量
var l = 0;
var t = 0;
//当前鼠标是否按下
var isDown = false;
//开始拖动
function divmousedown(){
if (isDown == true) {
return false;
}
var e = window.event || arguments.callee.caller.arguments[0];
//获取x坐标和y坐标
x = e.clientX;
y = e.clientY;
//获取左部和顶部的偏移量
l = document.getElementById('btn').offsetLeft;
t = document.getElementById('btn').offsetTop;
//设置鼠标状态为按下
isDown = true;
}
//移动
function divmousemoving(){
if (isDown == false) {
return;
}
var e = window.event || arguments.callee.caller.arguments[0];
//得到当前滑动到的位置
var nx = e.clientX;
var ny = e.clientY;
//计算移动后的左偏移量和顶部的偏移量
var nl = nx - (x - l);
var nt = ny - (y - t);
//按钮不超出范围
if (nl < -25) {
nl = -25;
}
if (nl > 675) {
nl = 675;
}
console.log("nl:"+nl);
document.getElementById('btn').style.left = nl + 'px';
//document.getElementById('btn').style.top = nt + 'px';
}
//鼠标松开
function divmouseup(){
console.log("------------------停下来了");
isDown = false;
let position = parseInt(document.getElementById('btn').style.left);
console.log("position:"+position);
}
</script>
</body>
</html>
说明：刘宏缔的架构森林是一个专注架构的博客，地址：https://www.cnblogs.com/architectforest
对应的源码可以访问这里获取： https://github.com/liuhongdi/
或: https://gitee.com/liuhongdi
说明：作者:刘宏缔 邮箱: [email protected]
二，测试效果
三，查看chrome的版本:
标签：5195.125,document,nl,自定义,滑块,getElementById,var,isDown,btn From： https://www.cnblogs.com/architectforest/p/16731172.html