拖拽,顾名思义,就是小滑块跟着你鼠标走,呈现一种拖拽的赶脚呗,那怎么实现呢(当鼠标在小滑块上面任意地方着落,小滑块即跟着鼠标的移动而移动,鼠标点哪是未知的,当鼠标松开时,小滑块定那不动)
固定语法
- 鼠标距离左面的距离是e.clientX
- 在鼠标没点小滑块之前,小滑块距离左面的距离是offsetLeft
这样,不论鼠标点哪,你都能知道,鼠标距离小滑块左边的距离disX= e.clientX-offsetLeft
- 鼠标的位置一直在变,但disX 保持不变了,so,小滑块定位的Left值就是iLeft = e.clientX - disX
- 同理可求得小滑块定位的Y值 iTop = e.clientY - disY
当时我就在想一个问题,为啥要先求出X,在求定位的left呢,offsetLeft 不就等于left吗,但是就像智障一样,难道你在移动的时候就知道小方块距离屏幕左边的距离了吗?你不得先定位在哪,然后才有offsetLeft 啊
鼠标抬起的时候,让方块不动,也就是清除滑动那个函数,置为null
为啥把oDiv1改成document了呢,因为如果是oDiv1的话,鼠标只有在小滑块上动的时候才跟着鼠标走,一旦鼠标走快了,脱离小滑块了,那小滑块就不动了
so,拖拽的全部代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拖拽</title>
<style>
*{
margin: 0;
padding: 0;
}
#drag{
width: 400px;
height: 400px;
background: #ff0;
position: absolute;//因为要移动,所以一定不要忘了定位
}
</style>
</head>
<body>
<div id="drag"></div>
<script>
var oDrag = document.getElementById("drag");
oDrag.onmousedown = function(e){
e = e||window.event;
var disX = e.clientX - oDrag.offsetLeft;
var disY = e.clientY - oDrag.offsetTop;
document.onmousemove = function(e){
e = e||window.event;
var iLeft = e.clientX - disX;
var iTop = e.clientY - disY;
oDrag.style.left = iLeft + "px";
oDrag.style.top = iTop +"px";
}
oDrag.onmouseup = function(){
document.onmousemove = null;
}
}
</script>
</body>
</html>