简单的鼠标可拖动div 兼容IE/FF
生活随笔
收集整理的這篇文章主要介紹了
简单的鼠标可拖动div 兼容IE/FF
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
來源：http://www.cnblogs.com/imwtr/p/4355416.html
作者：
主要思路：
一個div，注冊監聽onmousedown事件，然后處理獲取的對象及其相關值（對象高度，clientX/clientY位置等）
并繼而轉為監測onmousemove事件，在鼠標移動事件中更新div對象的位置屬性
鼠標松開的時候解除監聽，更新位置完成。
需要注意的兩點：
1.更新對象的位置需要用到o.style.left等，這些CSS屬性只能內嵌才能被訪問到：
<div id="box" style="left:200px;top:200px;"> box </div>
放在<style></style>中是無法訪問的，比如：
#box{position: absolute;left:200px;top:200px;width: 200px;}
假如這樣做，顯示的是無法獲取值，請看舉例：
// alert(e.clientX+" -- " + o.style.left+" -- "+ X);
這樣的結果為 ：（詳情看后邊代碼）
2. FireFox中是不能直接取event對象的，一般我們都會簡單地使用 e = e || event 來區分，其中e是相應于FF中函數的參數部分
比如：
document.getElementById("box").onmousedown = function(e)
{
getObject(this,e||event); //box捕獲事件并處理 e-->FF window.event-->IE
};
當然有些時候也可以這樣考慮：使用全局對象arguments[0]來替代捕獲到的事件參數
// dis = arguments[0]||window.event; //如果上面那句在FF下無法獲取事件，聽說可以通過 arguments[0]獲取FF下的事件對象
對于拖拽事件這里使用到了另外一種常用的方法：
// document.all（IE）使用setCapture方法綁定；其余比如FF使用Window對象針對事件的捕捉
document.all?o.setCapture() : window.captureEvents(Event.MOUSEMOVE); // document.all（IE）使用releaseCapture解除綁定；其余比如FF使用window對象針對事件的捕捉
document.all?o.releaseCapture() : window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP)
最后是一個可隨鼠標拖動的div
代碼，有注釋,希望能理解：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style type="text/css">
#box{position: absolute;left:200px;top:200px;width: 200px;border:1px solid #333;height: 200px;background-color: #009cc9;text-align: center;}
</style>
</head>
<body>
<div class="wrap">
<div id="box" style="left:200px;top:200px;"> box </div>
</div>
<script type="text/javascript">
var o, //捕獲到的事件
X, //box水平寬度
Y; //box垂直高度
function getObject(obj,e){ //獲取捕獲到的對象
o = obj;
// document.all（IE）使用setCapture方法綁定；其余比如FF使用Window對象針對事件的捕捉
document.all?o.setCapture() : window.captureEvents(Event.MOUSEMOVE);
X = e.clientX - parseInt(o.style.left); //獲取寬度，
Y = e.clientY - parseInt(o.style.top); //獲取高度，
// alert(e.clientX+" -- " + o.style.left+" -- "+ X);
}
document.getElementById("box").onmousedown = function(e){
getObject(this,e||event); //box捕獲事件并處理 e-->FF window.event-->IE
};
document.onmousemove = function(dis){ //鼠標移動事件處理
if(!o){ //如果未獲取到相應對象則返回
return;
}
if(!dis){ //事件
dis = event ;
// dis = arguments[0]||window.event; //如果上面那句在FF下無法獲取事件，聽說可以通過 arguments[0]獲取FF下的事件對象
}
o.style.left = dis.clientX - X +"px"; //設定box樣式隨鼠標移動而改變
o.style.top = dis.clientY - Y + "px";
};
document.onmouseup = function(){ //鼠標松開事件處理
if(!o){ //如果未獲取到相應對象則返回
return;
}
// document.all（IE）使用releaseCapture解除綁定；其余比如FF使用window對象針對事件的捕捉
document.all?o.releaseCapture() : window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP)
o = ''; //還空對象
};
</script>
</body>
</html>
總結
以上是生活随笔為你收集整理的简单的鼠标可拖动div 兼容IE/FF的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 摩尔庄园星空龙特效（摩尔庄园冰霜幽灵龙好
- 下一篇： yearProgress.vue