鼠标指针实现拖拽
2019-03-22 本文已影响25人
CondorHero
实现思路：
- 移动对象绝对定位
- 计算移动距离
- 移动对象跟随鼠标
- 添加 JS 监听按下松开
需要补充的知识：
document 的冒泡事件与捕获事件
JavaScript offset
拖拽实例.gif
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鼠标指针实现拖拽</title>
<style>
div{
position: absolute;
top: 0;
left: 0;
width: 140px;
height: 172px;
background-color: skyblue;
}
</style>
</head>
<body>
<div><img src="images/duck.gif" alt="" /></div>
<script type="text/javascript">
//得到元素
var oDiv = document.getElementsByTagName("div")[0];
//监听里面放监听。JS的奇淫技巧。
//当oDiv触发了onmousedown事件的情况下，docuent才有onmousemove事件
oDiv.onmousedown = function(event){
//鼠标按下去的时候，就要记录鼠标在盒子中的位置，这个位置实际上就是误差
var deltaX = event.clientX - oDiv.offsetLeft;
var deltaY = event.clientY - oDiv.offsetTop;
//整个文档添加mousemove事件，鼠标移动的时候触发
document.onmousemove = function(event){
//减去误差
oDiv.style.left = event.clientX - deltaX + "px";
oDiv.style.top = event.clientY - deltaY + "px";
event.preventDefault(); //小聪明
}
}
//鼠标抬起
document.onmouseup = function(){
//document身上的监听，设置为null，删除了监听
document.onmousemove = null;
}
</script>
</body>
</html>
遇见的问题：
- 对象内移动鼠标，移动对象不应移动，解决办法计算盒子 div 外边到 client 的距离 。
- 案例在实现过程中，拖拽图片时，当我们松开鼠标，移动对象仍然跟着鼠标，并未停止。解决办法就是去除浏览器图片默认移动。代码位于小聪明处
event.preventDefault(); //小聪明。
2019-03-22
