您的位置：首页 > Web前端 > JavaScript

javascript 鼠标拖拽盒子--基础功能版

2016-10-14 02:01 393 查看

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box{
width: 200px;
height: 200px;
background: lightskyblue;
position: absolute;
}
</style>
<script type="text/javascript">
window.onload=function(){
var oBox=document.getElementById('box');

var disx=0; //鼠标按住盒子box后,相对box的水平坐标，初始化
var disy=0;

oBox.onmousedown=function(ev){
var oEvent=ev||event;
disx=oEvent.clientX-oBox.offsetLeft;
disy=oEvent.clientY-oBox.offsetTop;

//不能用oBox.onmousemove=function(ev){}
//oBox的作用域相对document小，一旦鼠标拖拽速度很快,鼠标指针从盒子内部“甩出”，盒子就不会随着鼠标走
document.onmousemove=function(ev){
var oEvent=ev||event;
//++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
//  加入下面这段，实现了， 鼠标拖拽盒子，不会出现，把盒子，甩出可视区域。
var oLeft=oEvent.clientX-disx;
var oTop=oEvent.clientY-disy;

if(oLeft<0){
oLeft=0;
}
//不能写else else不能判断，else后面是直接跟着{}，{}里面写结果
//else if(){}用于多条件判断
else if(oLeft>document.documentElement.clientWidth-oBox.offsetWidth){
oLeft=document.documentElement.clientWidth-oBox.offsetWidth;
}

if(oTop<0){
oTop=0;
}
//不能写else else不能判断，else后面是直接跟着{}，{}里面写结果
//else if(){}用于多条件判断
else if(oTop>document.documentElement.clientHeight-oBox.offsetHeight){
oTop=document.documentElement.clientHeight-oBox.offsetHeight;
}

oBox.style.left=oLeft+'px';
oBox.style.top=oTop+'px';
//++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++                      //oBox.style.left=oEvent.clientX-disx+'px';
//oBox.style.top=oEvent.clientY-disy+'px';

};
//不能用oBox.onmousemove=function(ev)
//oBox的作用域相对document小，一旦鼠标拖拽速度很快，盒子就不会随着鼠标走
document.onmouseup=function(){
// 松开鼠标按键后，盒子不会再动。
document.onmousedown=null;
document.onmousemove=null;
};

return false; // 针对 火狐低版本的 二次拖拽出现的鬼影 。（但现在浏览器高版本，可能没有这个bug了。）
};
};
</script>
</head>
<body>
<div id="box"></div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航