萬盛學電腦網

 萬盛學電腦網 >> 腳本專題 >> javascript >> js實現拖拽效果

js實現拖拽效果

 本文主要是為了讓大家更好的理解js的面向對象,通過實現拖拽效果向大家展示js面向對象,非常不錯,這裡推薦給大家。

   

首先來了解一下,面向對象練習的基本規則和問題:

先寫出普通的寫法,然後改成面向對象寫法項
普通方法變形

·盡量不要出現函數嵌套函數
·可以有全局變量
·把onload函數中不是賦值的語句放到單獨函數中

改成面向對象

·全局變量就是屬性
·函數就是方法
·onload中創建對象
·改this指針問題

先把拖拽效果的布局完善好:
HTML結構:

<div id="box"></div>

csc樣式:
#box{position: absolute;width: 200px;height: 200px;background: red;}

第一步,首先把面向過程的拖拽回顧一下

 

代碼如下:
window.onload = function (){
// 獲取元素和初始值
var oBox = document.getElementById('box'),
disX = 0, disY = 0;
// 容器鼠標按下事件
oBox.onmousedown = function (e){
var e = e || window.event;
disX = e.clientX - this.offsetLeft;
disY = e.clientY - this.offsetTop;
document.onmousemove = function (e){
var e = e || window.event;
oBox.style.left = (e.clientX - disX) + 'px';
oBox.style.top = (e.clientY - disY) + 'px';
};
document.onmouseup = function (){
document.onmousemove = null;
document.onmouseup = null;
};
return false;
};
};

 

第二步,把面向過程改寫為面向對象

 

代碼如下:
window.onload = function (){
var drag = new Drag('box');
drag.init();
};
// 構造函數Drag
function Drag(id){
this.obj = document.getElementById(id);
this.disX = 0;
this.disY = 0;
}
Drag.prototype.init = function (){
// this指針
var me = this;
this.obj.onmousedown = function (e){
var e = e || event;
me.mouseDown(e);
// 阻止默認事件
return false;
};
};
Drag.prototype.mouseDown = function (e){
// this指針
var me = this;
this.disX = e.clientX - this.obj.offsetLeft;
this.disY = e.clientY - this.obj.offsetTop;
document.onmousemove = function (e){
var e = e || window.event;
me.mouseMove(e);
};
document.onmouseup = function (){
me.mouseUp();
}
};
Drag.prototype.mouseMove = function (e){
this.obj.style.left = (e.clientX - this.disX) + 'px';
this.obj.style.top = (e.clientY - this.disY) + 'px';
};
Drag.prototype.mouseUp = function (){
document.onmousemove = null;
document.onmouseup = null;
};

 

第三步,看看代碼有哪些不一樣

首頁使用了構造函數來創建一個對象:

 

代碼如下:
// 構造函數Drag
function Drag(id){
this.obj = document.getElementById(id);
this.disX = 0;
this.disY = 0;
}

 

遵守前面的寫好的規則,把全局變量都變成屬性!

然後就是把函數都寫在原型上面:

 

代碼如下:
Drag.prototype.init = function (){
};
Drag.prototype.mouseDown = function (){
};
Drag.prototype.mouseMove = function (){
};
Drag.prototype.mouseUp = function (){
};

 

先來看看init函數:

 

代碼如下:
Drag.prototype.init = function (){
// this指針
var me = this;
this.obj.onmousedown = function (e){
var e = e || event;
me.mouseDown(e);
// 阻止默認事件
return false;
};
};

 

我們使用me變量來保存了this指針,為了後面的代碼不出現this指向的錯誤

接著是mouseDown函數:

 

代碼如下:
Drag.prototype.mouseDown = function (e){
// this指針
var me = this;
this.disX = e.clientX - this.obj.offsetLeft;
this.disY = e.clientY - this.obj.offsetTop;
document.onmousemove = function (e){
var e = e || window.event;
me.mouseMove(e);
};
document.onmouseup = function (){
me.mouseUp();
}
};

 

改寫成面向對象的時候要注意一下event對象。因為event對象只出現在事件中,所以我們要把event對象保存變量,然後通過參數傳遞!

後面的mouseMove函數和mouseUp函數就沒什麼要注意的地方了!

copyright © 萬盛學電腦網 all rights reserved