<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#div1{
width:200px;
height:200px;
background-color:red;
position:absolute;
left:0;
top:0;
}
</style>
</head>
<body>
<div id="div1"></div>
<script>
var div1=document.getElementById('div1');
div1.onmousedown=function(ev){
var eve=window.event||ev;
//当前鼠标在物体上 此时鼠标和物体的相对位置距离
var disX=eve.clientX-div1.offsetLeft;
var disY=eve.clientY-div1.offsetTop;
//当鼠标移动位置后 物体的位置=最新鼠标位置-相对位置距离
document.onmousemove=function(ev){
var eve=window.ev||ev;
var l=eve.clientX-disX;
var t=eve.clientY-disY;
// l，t 是物体的位置
//左边当l<0物体 表示从左边拖出浏览器
if(l<0){
l=0;
}//右边判断div的left>浏览器的可视区clientWidth-div的宽度,表示物体被拖出右边
else if(l>document.documentElement.clientWidth-div1.offsetWidth){
l=document.documentElement.clientWidth-div1.offsetWidth;
}
if(t<0){
t=0;
}else if(t>document.documentElement.clientHeight-div1.offsetHeight){
t=ocument.documentElement.clientHeight-div1.offsetHeight;
}
div1.style.left=l+'px';
div1.style.top=t+'px';
}
//mousemove mouseup都加到document中防止鼠标快速移动的时候脱离物体
document.onmouseup=function(){
document.onmousemove=null;
document.onmouseup=null;
}
return false;//火狐的bug当是空div的时候会出现半透明情况
}
</script>
</body>
</html>
扫一扫
1290
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
