等虚线框的拖拽
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.box{border: 3px solid yellow; position: absolute;}
#div1{width: 100px; height: 100px; background: red; position: absolute;}
</style>
<script type="text/javascript">
window.onload = function(){
dragDown('div1');
};
function dragDown(id){
var oDiv = document.getElementById(id);
var disX = 0; //用于记住鼠标按下时 左侧 鼠标和浏览器边框的距离 减去 div距离浏览器边框的距离
var disY = 0; //用于记住鼠标按下时 顶部 鼠标和浏览器边框的距离 减去 div距离浏览器边框的距离
oDiv.onmousedown = function(ev){
var oEvent = ev||event;
disX=oEvent.clientX-oDiv.offsetLeft; //div内部鼠标距离div边框的左侧距离
disY=oEvent.clientY-oDiv.offsetTop //div内部鼠标距离div边框的顶部距离
var oNewDiv=document.createElement('div'); //创建一个div 用保证拖动的时间有虚线框出现
oNewDiv.className='box'; //为了新创建的div添加样式
oNewDiv.style.width=oDiv.offsetWidth+'px'; //把要拖动的物体的宽度赋值给创建的div
oNewDiv.style.height=oDiv.offsetHeight+'px';
oNewDiv.style.left=oDiv.style.left; //把要拖得的物体的left值赋值给创建的div
oNewDiv.style.top=oDiv.style.top;
document.body.appendChild(oNewDiv); //把创建好的div添加到页面里边去
if(oDiv.setCapture){ //利用IE的事件捕获解决IE鼠标按下选中文字的默认事件
oDiv.onmousemove= fnMove;
oDiv.onmouseup = fnUp;
oDiv.setCapture();
}else{ //谷歌和火狐解决默认鼠标按下方案
document.onmousemove= fnMove;
document.onmouseup = fnUp;
}
function fnMove(ev){ //把取消按下时间封装成函数
var oEvent = ev||event; //时间对象
var l = oEvent.clientX-disX; //鼠标移动事件 移动时用鼠标距离浏览器的边框距离减去div内鼠标的距离
var t = oEvent.clientY-disY;
if (l<50){ //不能div脱离游览器当小于0是直接复制为0 //小于50 就贴上去可以做磁性吸附的感觉
l=0;
} else if (l>document.documentElement.clientWidth-oDiv.offsetWidth){
l=document.documentElement.clientWidth-oDiv.offsetWidth;
} //如何移动的距离 大于 浏览器宽度减去div本身的宽度 则把 浏览器宽度减去div本身的宽度赋值给鼠标移动的距离
if (t<0){ //同理 就是顶部距离
t=0;
} else if (t>document.documentElement.clientHeight-oDiv.offsetHeight){
t=document.documentElement.clientHeight-oDiv.offsetHeight;
}
oNewDiv.style.left=l+'px';
oNewDiv.style.top=t+'px';
}
function fnUp(){
this.onmousemove=null; //弹起时把移动事件清空
this.onmouseup=null; //弹起时把按下事件清空
if(this.releaseCapture){
this.releaseCapture(); //如果是IE则存在时间捕获 所以取消
}
document.body.removeChild(oNewDiv); //鼠标抬起时把创建的div删除掉
oDiv.style.left=oNewDiv.style.left; //创建的div的位置赋值给要移动的物体
oDiv.style.top=oNewDiv.style.top;
}
return false; //把默认的鼠标按下时间屏蔽掉
};
}
</script>
</head>
<body>
文字字字
<div id="div1">拖拽</div>
</body>
</html>
