<!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=?,