JavaScript实现鼠标拖拽效果
前几篇博客一直在讲鼠标的移动事件相关的效果，今天再来讲一讲如何利用鼠标事件实现拖拽div块移动的效果。效果如图：
在这里插入图片描述
HTML代码：
<divid="box"></div>
CSS代码：
* { margin: 0; padding: 0; } #box { width: 200px; height: 200px; background: red; position: absolute; }
JS代码：
// 1.获取元素 var oBox = document.getElementById("box"); // 2.鼠标按下事件 oBox.onmousedown = function (ev) { var ev = ev || window.event; // 获取鼠标相对于盒子的坐标 var x2 = ev.offsetX; var y2 = ev.offsetY; // 鼠标移动 document.onmousemove = function (ev) { var ev = ev || window.event; var x3 = ev.pageX; var y3 = ev.pageY; oBox.style.top = y3 - y2 + "px"; oBox.style.left = x3 - x2 + "px" } } // 4.鼠标松开事件 document.onmouseup = function () { document.onmousemove = function () { } }
解题思路： 实现以上效果首先确定要利用鼠标的按下事件和鼠标的移动事件，其次就是利用鼠标指针的坐标(event.pageX,event.pageY)与鼠标相对于拖拽元素的坐标(event.offsetX,event.offsetY)的差来计算被拖拽元素的坐标值。
视频讲解链接：
https://www.bilibili.com/video/BV1AK411p7pz/
