js拖拽效果的原理及实现
2021-03-26 01:27
标签：移动 and UNC lse sel 鼠标 query listener 获取 拖拽元素分三步：1、鼠标摁下2、鼠标移动3、鼠标松开，是由这三个事件组成的。 先获取元素div；设置一个全局变量offsetX,offsetY；让div侦听鼠标摁下事件， 当收到信息时再开始侦听鼠标移动 和鼠标松开的事件，所以在这个事件回调函数里判断事件的类型， 最后鼠标松开时结束侦听。 js拖拽效果的原理及实现 标签：移动 and UNC lse sel 鼠标 query listener 获取 原文地址：https://www.cnblogs.com/ningyj/p/12641867.html var div=document.querySelector("div");
var offsetX,offsetY;
div.addEventListener("mousedown",mouseHandler);
function mouseHandler(e){
if(e.type==="mousedown"){
offsetX=e.offsetX;
offsetY=e.offsetY;
document.addEventListener("mousemove",mouseHandler)
document.addEventListener("mouseup",mouseHandler)
}else if(e.type==="mousemove"){
div.style.left=e.clientX-offsetX+"px";
div.style.top=e.clientY-offsetY+"px";
}else if(e.type==="mouseup"){
document.removeEventListener("mousemove",mouseHandler)
document.removeEventListener("mouseup",mouseHandler)
}
}