JavaScript实现鼠标拖拽效果
前几篇博客一直在讲鼠标的移动事件相关的效果,今天再来讲一讲如何利用鼠标事件实现拖拽div块移动的效果。效果如图:
HTML代码:
<div id="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/