<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box{
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;
var x = evt.clientX - oBox.offsetLeft;
var y = evt.clientY - oBox.offsetTop;
// var x = evt.offsetX;
// var y = evt.offsetY;
console.log(x)
document.onmousemove = function(e){
var evt = e || event;
var _left = evt.clientX-x;
var _top = evt.clientY-y;
if(_left <= 0){
_left = 0;
}
if(_left >= document.documentElement.clientWidth - oBox.offsetWidth){
_left = document.documentElement.clientWidth - oBox.offsetWidth;
}
if(_top <= 0){
_top = 0;
}
if(_top >= document.documentElement.clientHeight - oBox.offsetHeight){
_top = document.documentElement.clientHeight - oBox.offsetHeight;
}
oBox.style.left = _left + "px";
oBox.style.top = _top + "px";
}
document.onmouseup = function(){
document.onmousemove = null;
}
}
//控制边界
</script>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box{
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;
var x = evt.clientX - oBox.offsetLeft;
var y = evt.clientY - oBox.offsetTop;
// var x = evt.offsetX;
// var y = evt.offsetY;
console.log(x)
document.onmousemove = function(e){
var evt = e || event;
var _left = evt.clientX-x;
var _top = evt.clientY-y;
if(_left <= 0){
_left = 0;
}
if(_left >= document.documentElement.clientWidth - oBox.offsetWidth){
_left = document.documentElement.clientWidth - oBox.offsetWidth;
}
if(_top <= 0){
_top = 0;
}
if(_top >= document.documentElement.clientHeight - oBox.offsetHeight){
_top = document.documentElement.clientHeight - oBox.offsetHeight;
}
oBox.style.left = _left + "px";
oBox.style.top = _top + "px";
}
document.onmouseup = function(){
document.onmousemove = null;
}
}
//控制边界
</script>
</body>
</html>