拖拽及相关BUG的修复

来源：互联网发布：linux file 文件编码编辑：程序博客网时间：2024/09/21 07:52

代码如下，主要是注意获取点击时鼠标与盒子的相应位置，最后用移动后的坐标减去相对的坐标。注意限制盒子拖拽范围，火狐的鬼影问题即可。

<!DOCTYPE html>

<html>

<head>

*{margin: 0;padding: 0;}

#box{width: 100px;height: 100px;background-color: orange;position: absolute;}

</style>

window.onload=function(){

var oBox=document.getElementById('box');

var divx=0;

var divy=0;

oBox.onmousedown=function(ev){

var iEvent=ev||event;//兼容的获取事件

divx=iEvent.clientX-oBox.offsetLeft;//点击时的相对坐标

divy=iEvent.clientY-oBox.offsetTop;

document.onmousemove=function(ev){

var iEvent=ev||event;

oBox.style.top=iEvent.clientY-divy+'px';//移动时坐标减去相对坐标等于自动后坐标

oBox.style.left=iEvent.clientX-divx+'px';

//限制区域

if(iEvent.clientY-divy<0){

oBox.style.top='0';

}

if(iEvent.clientX-divx<0){

oBox.style.left='0'

}

if(iEvent.clientY-divy>document.documentElement.clientHeight-oBox.offsetHeight){

oBox.style.top=document.documentElement.clientHeight-oBox.offsetHeight+'px'

}

if(iEvent.clientX-divx>document.documentElement.clientWidth-oBox.offsetWidth){

oBox.style.left=document.documentElement.clientWidth-oBox.offsetWidth+'px';

}

};

document.onmouseup=function(){

document.onmousedown=null;

document.onmousemove=null;

};

return false;//修复火狐的鬼影BUG

};

</script>

</head>

<body>

</div>

</body>

</html>

0 0