前些天在某博客看到使用js實(shí)現(xiàn)窗口拖拽空凸，果然一臉懵逼的進(jìn)去较解，一臉懵逼的出來(lái)畜疾，今天就學(xué)習(xí)了拖拽事件（表示我的內(nèi)心開(kāi)始是拒絕的）
以下是實(shí)現(xiàn)代碼（這次是全的）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拖拽事件</title>
<style>
#box{
width:100px;
height:100px;
background:red;
position:absolute;
cursor: move;//個(gè)人喜好，當(dāng)鼠標(biāo)移動(dòng)到可拖拽位置時(shí)顯示為十字形（請(qǐng)?jiān)贗E6以上嘗試）
}
</style>
</head>
<body>
<div id="box" ></div>
<script>
var oBox=document.getElementById("box");
oBox.onmousedown=function(e1){
e1.preventDefault(); //阻止瀏覽器的默認(rèn)行為
var dX=e1.clientX-oBox.offsetLeft; //點(diǎn)擊位置距元素邊緣的位置
var dY=e1.clientY-oBox.offsetTop; //點(diǎn)擊位置距元素邊緣的位置
window.onmousemove=function(e2){
oBox.style.left=e2.clientX-dX+"px"; //拖拽過(guò)程中l(wèi)eft值的實(shí)際變化量
oBox.style.top=e2.clientY-dY+"px"; //拖拽過(guò)程中top值的實(shí)際變化量
}
oBox.onmouseup=function(){
window.onmousemove=null;//也可以寫(xiě)成window.onmousemove=""
//清空onmousemove哨坪，相對(duì)于鼠標(biāo)移動(dòng)事件處理函數(shù)為空
}//鼠標(biāo)抬起事件
}
</script>
</body>
</html>
值得一提的是我們傳入的參數(shù)e1和e2,他們都是對(duì)象（這只是代碼庸疾，這只是代碼），而系統(tǒng)給了我們兩個(gè)相當(dāng)有用的工具：
e.stopPropagation()阻止事件流（取消冒泡）当编，IE不支持該方法
window.event.cancelBubble = true 這是IE瀏覽器中阻止事件流的方法
e.preventDefault()阻止瀏覽器默認(rèn)行為届慈，IE同樣不支持該方法
window.event.returnValue = false;這是IE瀏覽器中阻止事件流的方法
當(dāng)然，事情沒(méi)有那么簡(jiǎn)單忿偷，如果在一個(gè)頁(yè)面中可以拖動(dòng)的元素有很多該怎么辦金顿，總不至于再寫(xiě)一個(gè)函數(shù)吧。當(dāng)然不用鲤桥，不然我也不會(huì)寫(xiě)這篇文章揍拆。這就需要我們今天的主角面向?qū)ο?/strong>登場(chǎng)（此處略）。
雖然使用面向?qū)ο髮?xiě)js有點(diǎn)暈茶凳，但是萬(wàn)變不離其宗嫂拴，也就是我們上面那一堆代碼。
這里是面向?qū)ο蟮耐献录a：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>面向?qū)ο蟮耐献录?lt;/title>
<style>
*{
margin: 0;padding: 0;
}
</style>
</head>
<body>
<script>
function Fly(imgId){
this.ele=document.getElementById(imgId);
var self=this;
this.ele.onmousedown=function(e){
e.preventDefault();
self.detaX=e.clientX-self.ele.offsetLeft;
self.detaY=e.clientY-self.ele.offsetTop;
self.start();
document.onmouseup=function(){
self.stop();
}
}
this.start=function(){
document.onmousemove=function(e){
var x=e.clientX-self.detaX;
var y=e.clientY-self.detaY;
self.move(x,y)
}
}
this.move=function(x,y){
self.ele.style.left=x+"px";
self.ele.style.top=y+"px";
}
this.stop=function(){
document.onmousemove=null;
}
}
new Fly("gudazi");
new Fly("shengbei")
</script>
</body>
</html>
果然代碼塊對(duì)于我還是太難了贮喧，還是一步一步來(lái)吧筒狠。
首先，我們的構(gòu)建一個(gè)對(duì)象吧
function Fly(){}這就是構(gòu)建的對(duì)象（其實(shí)就是函數(shù),但函數(shù)名首字母一定要大寫(xiě)）
我們還得獲得元素吧
function Fly(imgId){ this.ele=document.getElementById(imgId); }這里我們向?qū)ο笾袀魅雲(yún)?shù)箱沦，以便我們?nèi)蘸罂刂贫鄠€(gè)元素
我們還得保證對(duì)對(duì)象的可控
function Fly(imgId){
this.ele=document.getElementById(imgId);
var self=this;
}
this只在對(duì)象中表示我們操控的元素辩恼，但是對(duì)象的函數(shù)中需要一個(gè)新的表示。
接下來(lái)就是重點(diǎn)了谓形，這個(gè)對(duì)象所具有的功能灶伊，也就是函數(shù)：
思考1：這個(gè)被移動(dòng)的東西需要什么事件觸發(fā)，onmusedown也就有了
function Fly(imgId){
this.ele=document.getElementById(imgId);
var self=this;
this.ele.onmusedown=function(e){}
}
終于看到一個(gè)眼熟的了寒跳，不涉及其他函數(shù)的東西我們就都可以往里面填了
function Fly(imgId){
this.ele=document.getElementById(imgId);
var self=this;
this.ele.onmusedown=function(e){
e1.preventDefault();
var dX=e1.clientX-oBox.offsetLeft;
var dY=e1.clientY-oBox.offsetTop;
}
}
思考2：這個(gè)被移動(dòng)的物體上總共有哪些事件聘萨，
1.觸發(fā)條件onmusedown；
2.在持續(xù)觸發(fā)狀態(tài)下的onmousemove童太；
3.停止觸發(fā)onmouseup;
其中onmusedown與onmouseup互不干擾（你不可能即按下鼠標(biāo)左鍵又抬起鼠標(biāo)左鍵）米辐。也就是說(shuō)碾牌，onmouseup事件函數(shù)也能往里面塞：
function Fly(imgId){
this.ele=document.getElementById(imgId);
var self=this;
this.ele.onmusedown=function(e){
e1.preventDefault();
var dX=e1.clientX-oBox.offsetLeft;
var dY=e1.clientY-oBox.offsetTop;
this.ele.onmouseup=function(){
window.onmousemove=null;
}
}
}
接下來(lái)就剩下移動(dòng)過(guò)程了，由于移動(dòng)的范圍在window中我們不妨設(shè)置這么一個(gè)函數(shù)
this.start=function(){
document.onmousemove=function(e){
var x=e.clientX-self.dX;
var y=e.clientY-self.dY;
}
好像還差一點(diǎn)我們?cè)僭O(shè)置一個(gè)函數(shù)：
this.move=function(x,y){
self.ele.style.left=x+"px";
self.ele.style.top=y+"px";
}
這下就好辦了儡循，我們只要再組織一下
function Fly(imgId){
this.ele=document.getElementById(imgId);
var self=this;
this.ele.onmusedown=function(e){
e1.preventDefault();
var dX=e1.clientX-oBox.offsetLeft;
var dY=e1.clientY-oBox.offsetTop;
self.start();
this.ele.onmouseup=function(){
window.onmousemove=null;
}
}
this.start=function(){
document.onmousemove=function(e){
var x=e.clientX-self.detaX;
var y=e.clientY-self.detaY;
self.move(x,y)
}
}
this.move=function(x,y){
self.ele.style.left=x+"px";
self.ele.style.top=y+"px";
}
}
怎么，好像比我之前的代碼少了...
