Demo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>JS实现事件的拖拽</title>
<style>
#box{
width:100px;
height:100px;
background-color:#bfa;
position: absolute;
}
#box2{
width:200px;
height: 200px;
background-color: cornflowerblue;
position: absolute;
left:300px;
top: 300px;
}
</style>
<script>
window.onload=function(){
/*
实现元素拖拽的实现步骤:
1.鼠标在当前元素按下 onmousedown
2.元素随着鼠标的移动而移动 onmousemove
3.鼠标松开,元素停在当前位置 onmouseup
*/
var box=document.getElementById('box');
//鼠标按下
box.onmousedown=function(event){
// alert('test down');
var x=event.pageX;
var y=event.pageY;
console.log("x:"+x+",y:"+y);
//调整鼠标位置
//div的水平偏移量: 鼠标.clientX|pageX - 元素.offsetLeft
//div的垂直偏移量: 鼠标.clientY|pageY - 元素.offsetTop
var ol=event.pageX - box.offsetLeft;
var ul=event.pageY - box.offsetTop;
//当在元素按钮鼠标,再绑定鼠标移动事件
document.onmousemove=function(event){
event=event||window.event;
var x=event.pageX-ol;
var y=event.pageY-ul;
box.style.left=x+"px";
box.style.top=y+"px";
};
/*
当从把box移入另一个元素box2值
鼠标松开,松开onmouseup触发在box2
这时我们需要扩大onmouseup事件的触发范围
*/
// box.οnmοuseup=function(){
// document.οnmοusemοve=null;
// };
//绑定鼠标松开事件
document.onmouseup=function(){
//取消鼠标移动事件
// document.οnmοusemοve=null;
//取消document的onmousemove事件
document.onmousemove=false;
//取消document的onmouseup事件
document.onmouseup=null;
// alert('鼠标松开了');
};
};
}
</script>
</head>
<body>
<div id="box"></div>
<div id="box2"></div>
</body>
</html>