<!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>
*{
margin:0;
padding:0;
}
#div1 {
width: 200px;
height: 200px;
background-color: red;
position: absolute;
left: 0;
top: 0;
}
.box{
border:1px dashed black;
position:absolute;
left:0;
left:0;
}
</style>
</head>
<body>
<div id="div1">jdjjdjdjjgnnvikdkslal</div>
<script>
var div1 = document.getElementById('div1');
var disX=0;
var divY=0;
function mouseMove(ev){
var eve = window.ev || ev;
var box=document.getElementsByClassName('box')[0];
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 = document.documentElement.clientHeight - div1.offsetHeight;
}
//当鼠标按下移动的时候先让虚线框移动
//当虚线框抬起的时候再让物体移动到虚线框位置
//然后删除虚线框元素
box.style.left = l + 'px';
box.style.top = t + 'px';
}
function mouseUp() {
var box=document.getElementsByClassName('box')[0];
this.onmousemove = null;
this.onmouseup = null;
//移动原理
div1.style.left=box.offsetLeft+'px';
div1.style.top=box.offsetTop+'px';
document.body.removeChild(box);
if(div1.releaseCapture){
div1.releaseCapture();
}//释放捕获 还能够获得其他文字
}
div1.onmousedown = function (ev) {
var eve = window.event || ev;
//当前鼠标在物体上 此时鼠标和物体的相对位置距离
disX = eve.clientX - div1.offsetLeft;
disY = eve.clientY - div1.offsetTop;
var box=document.createElement('div');
box.className='box';
//让box的宽高度为div一样的宽高度
box.style.width=div1.offsetWidth-2+'px';
box.style.height=div1.offsetHeight-2+'px';
//让box的位置跟随 div移动 ，不然每次都在0位置
box.style.left=div1.offsetLeft+"px";
box.style.top=div1.offsetTop+"px";
document.body.appendChild(box);
if (div1.setCapture) {
//IE下
div1.onmousemove = mouseMove;
//替换回div1解决IE问题
div1.onmouseup = mouseUp;
div1.setCapture();//捕获解决IE
return false;//火狐的bug当是空div的时候会出现半透明情况,也解决很多谷歌的bug
//IE6-8不能解决
} else {
document.onmousemove = mouseMove;
document.onmouseup = mouseUp;
return false;//火狐的bug当是空div的时候会出现半透明情况
}
}
</script>
</body>
</html>
9618
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
