js 拖拽 DIV
2017-10-13 本文已影响0人
发光驴子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
* {margin:0; padding:0;}
#div1 {width:100px;height: 100px; background:#CCC; border:1px solid black; position:absolute;}
</style>
<script>
window.onload=function () {
var oDiv=document.getElementById("div1");
var disX=0;//鼠标距离物体的X位置
var dixY=0;
//鼠标按下的时候
oDiv.onmousedown=function (ev) {
var oEvent=ev||event;
disX=oEvent.clientX-oDiv.offsetLeft;
dixY=oEvent.clientY-oDiv.offsetTop;
//鼠标移动的时候,必须在鼠标按下的时候，才能开启鼠标移动事件，
// 加在document上是防止，速度过快，鼠标不在DIV上，就没有移动事件了
document.onmousemove=function (ev) {
var oEvent=ev||event;
var oDivLeft=oEvent.clientX-disX; //div X位置=鼠标位置-（鼠标和div的距离）
var oDivTop=oEvent.clientY-dixY;
if(oDivLeft<0){//小于0 ,是判断DIV 不能脱出浏览器左边的位置
oDivLeft=0;
}else if(oDivLeft>document.documentElement.clientWidth-oDiv.offsetWidth){
//大于可视区 ,是判断DIV 不能脱出浏览器又边的位置
oDivLeft=document.documentElement.clientWidth-oDiv.offsetWidth;
}
if(oDivTop<0){//小于0 ,是判断DIV 不能脱出浏览器上边的位置
oDivTop=0;
}else if(oDivTop>document.documentElement.clientHeight-oDiv.offsetHeight){
oDivTop=document.documentElement.clientHeight-oDiv.offsetHeight;
}
oDiv.style.left=oDivLeft+"px";
oDiv.style.top=oDivTop+"px";
}
//鼠标抬起事件，
document.onmouseup=function () {
document.onmousemove=null;//鼠标抬起时，清除鼠标移动事件
document.onmouseup=null;//清除没有意义的事件
}
return false;//是阻止浏览器的默认行为，其中包括火狐低版本的BUG
}
}
</script>
<body >
<div id="div1"></div>
</body>
</html>
