元素拖拽分成3个步骤：按下鼠标，移动鼠标，松开鼠标。拖拽原理：按下拖拽元素后开始监听文档中鼠标移动事件，然后再监听鼠标松开事件；鼠标移动时，元素div要随着鼠标一起移动，需要计算元素div位移的距离（移动的距离=鼠标离可视窗口的位置 – 鼠标在div中相对于左上角的位置）。然后松开鼠标时，删除移动事件和松开事件，元素完成拖拽。一开始先监听鼠标按下事件mousedown，事件触发执行mouseHandler函数；
div.addEventListener("mousedown",mouseHandler);
进入mouseHandler函数后，进行if else if 的判断，如果是按下事件，就监听鼠标移动和松开事件，这里要用document文档来作为监听对象，如果使用元素div监听时，如果鼠标在移动过程超出了div元素，就无法拖拽元素；
进入移动事件，就把鼠标移动的距离（鼠标离可视窗口的位置 – 鼠标在div中相对于左上角的位置）赋值给元素的left和top，元素就可以随着鼠标移动；
最后进入松开鼠标事件，删除了移动和送开鼠标事件，元素就会停在鼠标松开的位置
关键：元素显示位置=鼠标离可视窗口的位置 – 鼠标相对于在div元素左上角的位置js代码带注释
var div=document.querySelector("div");

var offsetX,offsetY;
//定义全局变量用于接收鼠标坐标的变量

div.addEventListener("mousedown",mouseHandler);

function mouseHandler(e){
//事件的执行函数自带参数e

if(e.type==="mousedown"){
//e.type是执行事件的类型

offsetX=e.offsetX;


offsetY=e.offsetY;


document.addEventListener("mousemove",mouseHandler)

document.addEventListener("mouseup",mouseHandler)
//如果有鼠标移动或松开事件的发生再次执行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);
//删除鼠标移动和鼠标松开事件

}

}
var div=document.querySelector("div");

var offsetX,offsetY;
//定义全局变量用于接收鼠标坐标的变量

div.addEventListener("mousedown",mouseHandler);

function mouseHandler(e){
//事件的执行函数自带参数e

if(e.type==="mousedown"){
//e.type是执行事件的类型

offsetX=e.offsetX;


offsetY=e.offsetY;


document.addEventListener("mousemove",mouseHandler)

document.addEventListener("mouseup",mouseHandler)
//如果有鼠标移动或松开事件的发生再次执行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);
//删除鼠标移动和鼠标松开事件

}

}效果如图：注意：div元素要设置定位才可以进行移动。以上就是本文的全部内容，希望对大家的学习有所帮助。