使用JavaScript的方法实现按住鼠标时元素跟着鼠标移动。
css样式
<style>
div{
width: 50px;
height: 50px;
background-color: red;
position: absolute;
}
</style>
JavaScript
<body>
<div></div>
<script>
var div0=document.querySelector("div")
//按下时开始监听在文档中鼠标移动的事件
//开始监听鼠标松开键的事件
//只有按下时才准备拖拽
div0.onmousedown=function(e1){
//当鼠标在文档移动时，不能再div上移动，因为鼠标可能离开div，造成无法拖拽
document.onmousemove=function(e){
//当鼠标移动时，将当前鼠标相对视口的坐标赋值给元素的1eft和top
//因为我们需要在按下的位置拖拽，因此我们还需要获取按下键鼠标相对div的左上角位置
//使用当前鼠标位置减去这个相对元素的左上角位置，保证鼠标所按位置拖拽
div0.style.left=e.clientX-e1.offsetX+"px"
div0.style.top=e.clientY-e1.offsetY+"px" }
//当释放鼠标键时，删除鼠标移动事件和删除鼠标释放事件
document.onmouseup=function(){
document.onmousemove=null;
document.onmouseup=null;
}
}
</script>
</body>原理解析
1.首先创建一个div并且添加css样式，必须添加宽高
2.给div加一个点击事件mousedown
点击实际上是由mouseup和mousedown两件事组成
mouseup和mousedown还可以针对鼠标的左中右键
click只能针对左键
div0.addEventListener("mousedown",clickHandler)
div0.addEventListener("mousemove",clickHandler)
div0.addEventListener("mouseup",clickHandler)
3.再给document添加mousemove和mouseup事件
为了能让div在可视窗口内移动，所以必须给document添加mousemove和mouseup事件，这是因为之前是在div添加mousedown，只要鼠标移出div的范围就不能再触发侦听的事件，所以为了能让div在整个页面上移动，需要给document添加mousemove和mouseup。
4.通过获取document的宽高clientX，clientY给div的位置赋值
4.最后再松开鼠标时删除事件mousemove和mouseup，否则由于mousemove一直触发，div会一直跟着鼠标移动。
升级版
使多个div实现拖拽
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>var divs=document.querySelectorAll("div")
for(var i=0;i<divs.length;i++){
divs[i].addEventListener("mousedown",mouseHandler);
}
function mouseHandler(e){
if(e.type==="mousedown"){
document.div=this
document.offset={X:e.offsetX,Y:e.offsetY}
document.addEventListener("mousemove",mouseHandler);
document.addEventListener("mouseup",mouseHandler);
}
else if(e.type==="mousemove"){
this.div.style.left=e.clientX-document.offset.X+"px"
this.div.style.top=e.clientY-document.offset.Y+"px"
}
else{
document.removeEventListener("mousemove",mouseHandler);
document.removeEventListener("mouseup",mouseHandler);
}
}
