div.onmousedown = function (e1) { //这里对鼠标按下事件执行事件,分别对鼠标移动和鼠标抬起情况下进行设置
document.onmousemove = function (e) { //当鼠标移动时,将当前鼠标相对视口的坐标赋值给元素的left和top
div.style.left = e.clientX - e1.offsetX + "px"; //因为我们需要在按下的位置拖拽,因此我们还需要获取按下键鼠标相对div的左上角位置,使用当前鼠标位置减去这个相对元素的左上角位置,保证鼠标所按位置拖拽
div.style.top = e.clientY - e1.offsetY + "px";
}
document.onmouseup = function () { //当释放鼠标键时,删除鼠标移动事件和删除鼠标释放事件
document.onmousemove = null;
document.onmouseup = null;
}
}
最后我们再执行页面,元素就能够跟着拖动了