js實(shí)現(xiàn)拖拽效果
首先來了解一下，面向?qū)ο缶毩?xí)的基本規(guī)則和問題：
先寫出普通的寫法，然后改成面向?qū)ο髮懛?xiàng)
普通方法變形
·盡量不要出現(xiàn)函數(shù)嵌套函數(shù)
·可以有全局變量
·把onload函數(shù)中不是賦值的語句放到單獨(dú)函數(shù)中
改成面向?qū)ο?/p>
·全局變量就是屬性
·函數(shù)就是方法
·onload中創(chuàng)建對象
·改this指針問題
先把拖拽效果的布局完善好：
HTML結(jié)構(gòu)：
<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;
// 容器鼠標(biāo)按下事件
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;
};
};
第二步，把面向過程改寫為面向?qū)ο?/p>
window.onload = function (){
var drag = new Drag('box');
drag.init();
};
// 構(gòu)造函數(shù)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);
// 阻止默認(rèn)事件
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;
};
第三步，看看代碼有哪些不一樣
首頁使用了構(gòu)造函數(shù)來創(chuàng)建一個(gè)對象：
// 構(gòu)造函數(shù)Drag
function Drag(id){
this.obj = document.getElementById(id);
this.disX = 0;
this.disY = 0;
}
遵守前面的寫好的規(guī)則，把全局變量都變成屬性！
然后就是把函數(shù)都寫在原型上面：
Drag.prototype.init = function (){
};
Drag.prototype.mouseDown = function (){
};
Drag.prototype.mouseMove = function (){
};
Drag.prototype.mouseUp = function (){
};
先來看看init函數(shù)：
Drag.prototype.init = function (){
// this指針
var me = this;
this.obj.onmousedown = function (e){
var e = e || event;
me.mouseDown(e);
// 阻止默認(rèn)事件
return false;
};
};
我們使用me變量來保存了this指針，為了后面的代碼不出現(xiàn)this指向的錯(cuò)誤
接著是mouseDown函數(shù):
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();
}
};
改寫成面向?qū)ο蟮臅r(shí)候要注意一下event對象。因?yàn)閑vent對象只出現(xiàn)在事件中，所以我們要把event對象保存變量，然后通過參數(shù)傳遞！
后面的mouseMove函數(shù)和mouseUp函數(shù)就沒什么要注意的地方了！
要注意的問題
關(guān)于this指針的問題，面向?qū)ο罄锩鎡his特別重要！
this拓展閱讀:
http://div.io/topic/809
關(guān)于event對象的問題，event對象只出現(xiàn)在事件里面，所以寫方法的時(shí)候要注意一下！
相關(guān)文章
基于Bootstrap3表格插件和分頁插件實(shí)例詳解
這篇文章主要介紹了基于Bootstrap3表格插件和分頁插件實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下2016-05-05
jQuery實(shí)現(xiàn)可收縮展開的級聯(lián)菜單實(shí)例代碼
這篇文章主要是對利用jQuery實(shí)現(xiàn)可收縮展開的級聯(lián)菜單的實(shí)例代碼進(jìn)行了詳細(xì)的介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11
基于iscroll.js實(shí)現(xiàn)下拉刷新和上拉加載效果
這篇文章主要為大家詳細(xì)介紹了基于iscroll.js實(shí)現(xiàn)下拉刷新和上拉加載效果,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-11-11
js實(shí)現(xiàn)選中頁面文字將其分享到新浪微博
這篇文章主要介紹了js實(shí)現(xiàn)選中頁面文字將其分享到新浪微博，需要的朋友可以參考下2015-11-11
Phaser.js實(shí)現(xiàn)簡單的跑酷游戲附源碼下載
js實(shí)現(xiàn)無縫滾動(dòng)圖（可控制當(dāng)前滾動(dòng)的方向）
