<!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>javascript 鼠标拖拽盒子--基础功能版
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
JavaScript 音频插件和图表插件
howler音頻插件 配置項及事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <s
JavaScript中的window对象
window對象：每一個該對象代表一個瀏覽器窗口 1.常用方法如下 open("要打開的頁面文件名","打開窗口在操作系統中的名稱(任何名稱都可以)", "toolbar=?,menubar=?,