|
拖放鎖定
鎖定分三種，分別是：水平方向鎖定(LockX)、垂直方向鎖定(LockY)、完全鎖定(Lock)。
這個比較簡單，水平和垂直方向的鎖定只要在Move判斷是否鎖定再設(shè)置left和top就行，如果是完全鎖定就直接返回。
if(!this.LockX){ this.Drag.style.left = ...; }
if(!this.LockY){ this.Drag.style.top = ...; }
觸發(fā)對象
觸發(fā)對象是用來觸發(fā)拖放程序的。有的時候不需要整個拖放對象都用來觸發(fā)，這時就需要觸發(fā)對象了。
使用了觸發(fā)對象后，進行移動的還是拖放對象，只是用觸發(fā)對象來觸發(fā)拖放（一般的使用是把觸發(fā)對象放到拖放對象里面）。
范圍限制
要設(shè)置范圍限制必須先把Limit設(shè)為true。范圍限制分兩種，分別是固定范圍和容器范圍限制，主要在Move程序中設(shè)置。
原理是當(dāng)比較的值超過范圍時，修正left和top要設(shè)置的值使拖放對象能保持在設(shè)置的范圍內(nèi)。
固定范圍限制
容器范圍限制就是指定上下左右的拖放范圍。
各個屬性的意思是：
- 上(mxTop)：top限制；
- 下(mxBottom)：top+offsetHeight限制；
- 左(mxLeft)：left限制；
- 右(mxRight)：left+offsetWidth限制。
如果范圍設(shè)置不正確，可能導(dǎo)致上下或左右同時超過范圍的情況，程序中有一個Repair程序用來修正范圍參數(shù)的。
Repair程序會在程序初始化和Start程序中執(zhí)行，在Repair程序中修正mxRight和mxBottom：
this.mxRight = Math.max(this.mxRight, this.mxLeft + this.Drag.offsetWidth);
this.mxBottom = Math.max(this.mxBottom, this.mxTop + this.Drag.offsetHeight);
其中mxLeft+offsetWidth和mxTop+offsetHeight分別是mxRight和mxBottom的最小范圍值。
根據(jù)范圍參數(shù)修正移動參數(shù)：
iLeft = Math.max(Math.min(iLeft, mxRight - this.Drag.offsetWidth), mxLeft);
iTop = Math.max(Math.min(iTop, mxBottom - this.Drag.offsetHeight), mxTop);
對于左邊上邊要取更大的值，對于右邊下面就要取更小的值。
容器范圍限制
容器范圍限制的意思就是把范圍限制在一個容器_mxContainer內(nèi)。
要注意的是拖放對象必須包含在_mxContainer中，因為程序中是使用相對定位來設(shè)置容器范圍限制的（如果是在容器外就要用絕對定位，這樣處理就比較麻煩了），還有就是容器空間要比拖放對象大，這個就不用說明了吧。
原理跟固定范圍限制差不多，只是范圍參數(shù)是根據(jù)容器的屬性的設(shè)置的。
當(dāng)設(shè)置了容器，會自動把position設(shè)為relative來相對定位：
!this._mxContainer || CurrentStyle(this._mxContainer).position == "relative" || (this._mxContainer.style.position = "relative");
注意relative要在獲取offsetLeft和offsetTop即設(shè)置_x和_y之前設(shè)置，offset才能正確獲取值。
由于是相對定位，對于容器范圍來說范圍參數(shù)上下左右的值分別是0、clientHeight、0、clientWidth。
clientWidth和clientHeight是容器可視部分的寬度和高度（詳細參考這里）。
為了容器范圍能兼容固定范圍的參數(shù)，程序中會獲取容器范圍和固定范圍中范圍更小的值：
mxLeft = Math.max(mxLeft, 0);
mxTop = Math.max(mxTop, 0);
mxRight = Math.min(mxRight, this._mxContainer.clientWidth);
mxBottom = Math.min(mxBottom, this._mxContainer.clientHeight);
注意如果在程序執(zhí)行之前設(shè)置過拖放對象的left和top而容器沒有設(shè)置relative，在自動設(shè)置relative時會發(fā)生移位現(xiàn)象，所以程序在初始化時就執(zhí)行一次Repair程序防止這種情況。因為offsetLeft和offsetTop要在設(shè)置relative之前獲取才能正確獲取值，所以在Start程序中Repair要在設(shè)置_x和_y之前執(zhí)行。
因為設(shè)置相對定位的關(guān)系，容器_mxContainer設(shè)置過后一般不要取消或修改，否則很容易造成移位異常。
出處：藍色理想
責(zé)任編輯：bluehearts
上一頁 JavaScript 拖放效果分析 [1] 下一頁 JavaScript 拖放效果分析 [3]
◎進入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 2 頁 JavaScript 拖放效果分析 [2]
