实现div的随意拖拽,需要注意的就是不能拖着拖着div在浏览器里面消失了,因此需要进行位置计算(用到的数据)
1、获取浏览器可见区域宽高
browserWidth = document.documentElement.clientWidth
browserHeight = document.documentElement.clientHeight
2、获取div宽高
boxWidth = document.getElementById('box').offsetWidth
boxHeight = document.getElementById('box').offsetHeight
3、鼠标相对于div左侧、顶部位置
disX = e.clientX - this.offsetLeft;
disY = e.clientY - this.offsetTop;
不说了,直接上完整代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拖拽</title>
<style>
*{
margin: 0;
padding: 0;
}
#box{
position: absolute;
width: 200px;
height: 200px;
background: red;}
</style>
</head>
<body>
<div id="box"></div>
<script>
function move(){
// 获取元素和初始值
var oBox = document.getElementById('box'),disX = 0, disY = 0;
// 获取浏览器可见区域宽高,div宽高
var browserWidth = document.documentElement.clientWidth,
browserHeight = document.documentElement.clientHeight,
boxWidth = document.getElementById('box').offsetWidth,
boxHeight = document.getElementById('box').offsetHeight;
// 容器鼠标按下事件
oBox.onmousedown = function (e){
var e = e || window.event;
// 鼠标相对于div左侧位置
disX = e.clientX - this.offsetLeft;
disY = e.clientY - this.offsetTop;
document.onmousemove = function (e){
var e = e || window.event;
oBox.style.left = (e.clientX - disX) + 'px';
if((e.clientX - disX)<=0){
oBox.style.left = 0;
}else if((boxWidth - disX + e.clientX) >= browserWidth){
oBox.style.left = browserWidth - boxWidth + "px";
}
oBox.style.top = (e.clientY - disY) + 'px';
if((e.clientY - disY) <= 0){
oBox.style.top = 0;
}else if((boxHeight - disY + e.clientY) >= browserHeight){
oBox.style.top = browserHeight - boxHeight + "px";
}
};
document.onmouseup = function (){
document.onmousemove = null;
document.onmouseup = null;
};
return false;
};
}
move();
</script>
</body>
</html>