js實現拖拽效果
更新時間：2015年02月12日 16:18:02 投稿：hebedich
本文主要是為了讓大家更好的理解js的面向對象，通過實現拖拽效果向大家展示js面向對象，非常不錯，這里推薦給大家。
首先來了解一下，面向對象練習的基本規(guī)則和問題：
先寫出普通的寫法，然后改成面向對象寫法項
普通方法變形
·盡量不要出現函數嵌套函數
·可以有全局變量
·把onload函數中不是賦值的語句放到單獨函數中
改成面向對象
·全局變量就是屬性
·函數就是方法
·onload中創(chuàng)建對象
·改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;
};
第三步，看看代碼有哪些不一樣
首頁使用了構造函數來創(chuàng)建一個對象：
復制代碼 代碼如下:
// 構造函數Drag
function Drag(id){
this.obj = document.getElementById(id);
this.disX = 0;
this.disY = 0;
}
遵守前面的寫好的規(guī)則，把全局變量都變成屬性！
然后就是把函數都寫在原型上面：
復制代碼 代碼如下:
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函數就沒什么要注意的地方了！
要注意的問題
關于this指針的問題，面向對象里面this特別重要！
this拓展閱讀:
http://div.io/topic/809
關于event對象的問題，event對象只出現在事件里面，所以寫方法的時候要注意一下！
相關文章
這篇文章主要為大家詳細介紹了js實現上下左右鍵盤控制div移動，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-01-01
這篇文章主要介紹了ES6中的數組擴展方法,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-08-08
不同的排序算法，執(zhí)行效率有著天壤之別，本腳本用JavaScript演示了各種常見的排序算法，包括：冒泡排序、選擇排序、插入排序、謝爾排序、快速排序(遞歸)、快速排序(堆棧)、歸并排序、堆排序2014-09-09
今天小編就為大家分享一篇對Layer彈窗使用及返回數據接收的實例詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
這篇文章主要介紹了JavaScript定時器常見用法,結合實例形式分析了JavaScript定時器常見功能、應用及相關操作技巧,需要的朋友可以參考下2019-11-11
這篇文章主要為大家詳細介紹了微信小程序實現發(fā)送驗證碼按鈕效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-12-12
這篇文章主要為大家詳細介紹了OpenLayer3自定義測量控件MeasureTool，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
這篇文章主要介紹了Nuxt配置Element-UI按需引入方法，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-07-07
這篇文章主要介紹了Javascript中對象繼承的實現,需要的朋友可以參考下2014-05-05
這篇文章主要為大家詳細介紹了小程序實現計時器功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07