js拖拽效果的原理及实现
js实现对元素的拖拽,主要在于将鼠标的点击事件分为三个部分:mousedown(鼠标按下),mousemove(鼠标移动),mouseup(鼠标松开)
<script>
//通过ID先获取到需要移动的元素
var div=document.querySelector("div");
var offsetX,offsetY;
//侦听div上面的鼠标按下事件
div.addEventListener("mousedown",mouseDownHandler);
//当鼠标按下时,执行下面的函数
function mouseDownHandler(e){
//获取到鼠标相对于当前元素的位置
offsetX=e.offsetX;
offsetY=e.offsetY;
//将div元素的拖拽委托给document,这样就不会出现,鼠标离开div无法将拖拽的问题
//侦听鼠标在document上移动和松开事件
document.addEventListener("mousemove",mousemoveHandler);
document.addEventListener("mouseup",mouseUpHandler);
}
//当执行鼠标移动时执行下面的函数
function mousemoveHandler(e){
//修改div的位置,e.clientX,鼠标相对于可视窗口的水平距离,e.clientY,鼠标相对于可视窗口的垂直距离,减去鼠标距离目标元素的位置,就是目标元素相对于可是窗口的水平和垂直距离
div.style.left=e.clientX-offsetX+"px";
div.style.top=e.clientY-offsetY+"px";
}
//当我们松开鼠标时,要将鼠标点击事件和移动事件删除,不然出现div黏在鼠标上
function mouseUpHandler(e){
document.removeEventListener("mousemove",mousemoveHandler);
document.removeEventListener("mouseup",mouseUpHandler);
}
</script>
上述就是实现简单的div拖拽效果,欢迎各位提出建议