首先，是最基本的面向過程的拖拽**
/*css*//*html*/
"box">
/*js*/複製**
盡量不要出現函式巢狀函式
複製**在ie和谷歌下，這樣是可以的，但是火狐下，應為有些地方為了this指向 巢狀了一層函式，但火狐可不這樣，他認為event是事件函式傳遞的，也就是事件後面更著的函式，這是好就需要把event當做引數傳遞了
複製**但是火狐下報錯:typeerror: event is undefined火狐的解決辦法
複製**也可以吧init 放進建構函式裡面，這樣只要new 乙個就可以生成拖拽了 ,如下所示
複製**複製**改寫物件導向
說了這麼多，我們來封裝乙個拖拽元件吧
元件就該可以自自定義樣式吧～～～～～，data-config寫入自定義的樣式，有人說你怎麼怎麼雞肋，不如css裡面寫寫快，但也是可以不寫的，有預設引數，js裡面已經寫好了，如果data-config寫了的話是可以覆蓋js裡面的，具體看js**
"box1" data-config=''>
複製**
*
div複製**
// 外層包裹防止函式被汙染
(function
() ;
// 若有自定義屬性，那就合併
if (this.getconfig())
console.log(this.config);
this.init();
}getconfig
() else
}init
() ;
// 改變設定的屬性
for (const i in this.config)
}/* 拖拽本體 */
fndown (ev, _this) ;
document.onmouseup = this.fnup;
/* 阻止預設事件 */
return
false;
}fnmove (ev) ;
fnup
() } window.drag = drag;
})();
複製**
支援的不夠怎麼完美，見諒。。
// 在fndown裡面先判斷一下
// 判斷是否為手機端
var touch;
if (ev.touches) else
this.disx = touch.clientx - this.odiv.offsetleft;
this.disy = touch.clienty - this.odiv.offsettop;
複製**
// 原理還是一樣的
// js**如下
(function
() ;
// 若有自定義屬性，那就合併
if (this.getconfig())
console.log(this.config);
this.init();
}getconfig
() else
}init
() ;
// 移動端
this.odiv.ontouchstart=function(ev)
// 改變設定的屬性
for (const i in this.config)
}/* 拖拽本體 */
fndown(ev, _this) else
this.disx = touch.clientx - this.odiv.offsetleft;
this.disy = touch.clienty - this.odiv.offsettop;
// pc
document.onmousemove = function (ev) ;
// 移動端
document.ontouchmove = function (ev) ;
document.onmouseup = this.fnup;
document.ontouchend = this.fnup;
/* 阻止預設事件 */
return
false;
}fnmove(ev) else
this.odiv.style.left = touch.clientx - this.disx + 'px';
this.odiv.style.top = touch.clienty - this.disy + 'px';
};fnup
() }
window.drag = drag;
})();
複製**
拖拽的物件導向寫法
上面是面向過程的寫法，而下面將講解如果寫物件導向的寫法，物件導向其實就是建立乙個建構函式，把執行函式寫到原型上面，然後可以通過建立例項物件的方法可以實現重複的呼叫。1.首先，建立出乙個建構函式，然後將出現的函式，從最裡面的執行函式依次寫到原型上，不可以出現函式巢狀，在最外層的函式裡面呼叫裡面的函式，...
《黃帝內經》從養生到物件導向的思想！
是以志閑而少欲，心安而不懼，形勞而不倦，氣從以順，各從其欲，皆得所願。我們不能簡單地以現在的白話文來理解古文。而最簡單理解古文的方法是按漢字的象形意思來解，還有一種方法就是按這個字相關聯的片語來理解。先看第一句 志閑而少欲 現在的人一看這句就覺得很是消積的一面，覺得沒意思。其實是我們沒有真正理解。先...
物件導向與面向過程的過程的那些事
物件導向是強調的是完成一件事情的方法，面向過程是更加強調解決乙個問題的整個的流程 聽不懂？先記住，物件導向是個好東西那我們就物件導向的好處舉個例子 大家都吃過蓋飯和炒飯吧，蓋飯我可以是五花八門，我準備蓋飯，是菜和飯相分離的，我準備不同的菜就可以產生不同的蓋飯，那對於炒飯呢，能做到飯和菜分離嗎？我如果...