控制div的边界
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
position: absolute;
width: 200px;
height: 200px;
background: red;
}
</style>
</head>
<body>
<div id="box"></div>
<script type="text/javascript">
//三要素（事件名） mousedown mousemove mouseup
var oBox = document.getElementById("box");
oBox.onmousedown = function(e){
var evt = e || event;
//获取相对于父级的XY
var x = evt.offsetX;
var y = evt.offsetY;
//获取可视宽度高度
var cw = document.documentElement.clientWidth;
var ch = document.documentElement.clientHeight;
//获取事件源的宽高
var bw = oBox.offsetWidth;
var bh = oBox.offsetHeight;
document.onmousemove = function(e){
var evt = e || event;
//移动后盒子的距离
var _left = evt.clientX-x;
var _top = evt.clientY-y;
//控制div移动的边界
_left = _left <= 0 ? 0 : _left>=cw-bw ? cw-bw : _left;
_top = _top <= 0 ? 0 : _top>=ch-bh ? ch-bh : _top;
oBox.style.left = _left + "px";
oBox.style.top = _top + "px";
}
document.onmouseup = function(){
document.onmousemove = null;
}
}
</script>
</body>
</html>
1680
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
