<!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>
7573
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
