<body>
<div id="div1" style="width: 200px;height: 200px;background-color: #444;top: 0;left: 0;position: absolute;margin: 0;"></div>
<!-- margin: 0 如果不设置后面取不到 -->
</body>
<script type="text/javascript">
var div1=document.getElementById('div1')
var down=false
var mousetop=0
var mouseleft=0
window.onmousedown=function({x,y}){
let divH=div1.clientHeight //这四个不能写在外面
let divW=div1.clientWidth //这四个不能写在外面
let top=div1.offsetTop //这四个不能写在外面，div左上角距窗口左边距
let left=div1.offsetLeft //这四个不能写在外面，div左上角距除菜单栏窗口上边距
if(y>=top&&y<=top+divH&&x>=left&&x<=left+divW){ //如果鼠标按下的位置在div内
down=true //区分鼠标按着呢还是没按呢
mousetop=y-parseInt(div1.style.marginTop) //如果没设置margin:0这里获取不到
mouseleft=x-parseInt(div1.style.marginLeft)
}
}
window.onmousemove=function(event){
if(down==true){
//左margin等于鼠标移动时距离左窗口的实时距离减去鼠标距div左边框的距离
div1.style.marginLeft=event.clientX-mouseleft+"px"
div1.style.marginTop=event.clientY-mousetop+"px"
}
}
window.onmouseup=function({x,y}){
down=false
}
</script>
</html>
|