|
拖放效果，也叫拖拽，學(xué)名Drag-and-drop ，是最常見的js特效之一。
如果忽略很多細(xì)節(jié)，實(shí)現(xiàn)起來很簡單，但往往細(xì)節(jié)才是難點(diǎn)所在。
這個(gè)程序的原型是在做圖片切割效果的時(shí)候做出來的，那時(shí)參考了好幾個(gè)同類的效果，跟muxrwc和BlueDestiny學(xué)習(xí)了不少東西。
雖然每次整理都覺得很好了，不過每隔一段時(shí)間又會(huì)發(fā)現(xiàn)得某個(gè)地方可以改善，某個(gè)地方有錯(cuò)誤，某些需求需要實(shí)現(xiàn)，就像自己學(xué)習(xí)的知識那樣。
這里考慮到有的人可能只需要簡單的拖放，所以有一個(gè) 簡化版的拖放SimpleDrag ，方便學(xué)習(xí)。
查看效果 簡化版
程序原理
這里以SimpleDrag為例說一下基本原理。
首先初始化程序中要一個(gè)拖放對象：
this.Drag = $(drag);
還要兩個(gè)參數(shù)在開始時(shí)記錄鼠標(biāo)相對拖放對象的坐標(biāo)：
this._x = this._y = 0;
還有兩個(gè)事件對象函數(shù)用于添加移除事件：
this._fM = BindAsEventListener(this, this.Move);
this._fS = Bind(this, this.Stop);
分別是拖動(dòng)程序和停止拖動(dòng)程序。
拖放對象的position必須是absolute絕對定位：
this.Drag.style.position = "absolute";
最后把Start開始拖放程序綁定到拖放對象mousedown事件：
addEventHandler(this.Drag, "mousedown", BindAsEventListener(this, this.Start));
鼠標(biāo)在拖放對象按住，就會(huì)觸發(fā)Start程序，主要是用來準(zhǔn)備拖動(dòng)，在這里記錄鼠標(biāo)相對拖放對象的坐標(biāo)：
this._x = oEvent.clientX - this.Drag.offsetLeft;
this._y = oEvent.clientY - this.Drag.offsetTop;
并把_fM拖動(dòng)程序和_fS停止拖動(dòng)程序分別綁定到document的mousemove和mouseup事件：
addEventHandler(document, "mousemove", this._fM);
addEventHandler(document, "mouseup", this._fS);
綁定到document可以保證事件在整個(gè)窗口文檔中都有效。
當(dāng)鼠標(biāo)在文檔上移動(dòng)時(shí)，就會(huì)觸發(fā)Move程序了，這里就是實(shí)現(xiàn)拖動(dòng)的程序。
通過現(xiàn)在鼠標(biāo)的坐標(biāo)值跟開始拖動(dòng)時(shí)鼠標(biāo)相對的坐標(biāo)值的差就可以得到拖放對象應(yīng)該設(shè)置的left和top了：
this.Drag.style.left = oEvent.clientX - this._x + "px";
this.Drag.style.top = oEvent.clientY - this._y + "px";
最后放開鼠標(biāo)后就觸發(fā)Stop程序結(jié)束拖放。
這里的主要作用是把Start程序中給document添加的事件移除：
removeEventHandler(document, "mousemove", this._fM);
removeEventHandler(document, "mouseup", this._fS);
這樣一個(gè)簡單的拖放程序就做好了，下面說說其他擴(kuò)展和細(xì)節(jié)部分。
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁 下一頁 JavaScript 拖放效果分析 [2]
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 JavaScript 拖放效果分析 [1]
第 2 頁 
