js代码
drag('divone') //需要哪个盒子移动就将哪个盒子类名传入
function drag(name){
divone = document.getElementsByClassName(name);
for(var i = 0; i<divone.length;i++){
divone[i].onmousedown = function(e){
var dive = e || event;
var distanceX = dive.clientX - e.target.offsetLeft//鼠标点击盒子X轴的位置减去盒子距离左边的位置;得到在盒子内点击的位置
var distanceY = dive.clientY - e.target.offsetTop//鼠标点击盒子Y轴的位置减去盒子距离顶部的位置;得到在盒子内点击的位置
document.onmousemove = function(ev){
var dive = ev || event
ev.target.style.top = dive.clientY - distanceY +'px'; //移动时的Y位置减去鼠标在盒子内点击的位置;得到当前位置
ev.target.style.left = dive.clientX - distanceX +'px'; //移动时的X位置减去鼠标在盒子内点击的位置;得到当前位置
}
document.onmouseup = function(){
document.onmousemove = null;
document.onmouseup = null;
}
}
}
}
全部代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
html,body{
width: 100%;
height: 100%;
}
.divone{
width: 150px;
height: 150px;
position: absolute;
background: #222;
}
</style>
</head>
<body>
<div class="divone"></div>
<script>
drag('divone')
function drag(name){
divone = document.getElementsByClassName(name);
for(var i = 0; i<divone.length;i++){
divone[i].onmousedown = function(e){
var dive = e || event;
var distanceX = dive.clientX - e.target.offsetLeft//鼠标点击盒子X轴的位置减去盒子距离左边的位置;得到在盒子内点击的位置
var distanceY = dive.clientY - e.target.offsetTop//鼠标点击盒子Y轴的位置减去盒子距离顶部的位置;得到在盒子内点击的位置
document.onmousemove = function(ev){
var dive = ev || event
ev.target.style.top = dive.clientY - distanceY +'px'; //移动时的Y位置减去鼠标在盒子内点击的位置;得到当前位置
ev.target.style.left = dive.clientX - distanceX +'px'; //移动时的X位置减去鼠标在盒子内点击的位置;得到当前位置
}
document.onmouseup = function(){
document.onmousemove = null;
document.onmouseup = null;
}
}
}
}
</script>
</body>
</html>
注: 要移动的盒子一定要加定位