拖放效果，也叫拖拽，學(xué)名Drag-and-drop ，是最常見的js特效之一。如果忽略很多細(xì)節(jié)，實(shí)現(xiàn)起來很簡(jiǎ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í)的知識(shí)那樣。

這里考慮到有的人可能只需要簡(jiǎn)單的拖放，所以有一個(gè) 簡(jiǎn)化版的拖放SimpleDrag ，方便學(xué)習(xí)。

查看效果簡(jiǎn)化版

程序原理

這里以SimpleDrag為例說一下基本原理。

首先初始化程序中要一個(gè)拖放對(duì)象：

this.Drag = $(drag);

還要兩個(gè)參數(shù)在開始時(shí)記錄鼠標(biāo)相對(duì)拖放對(duì)象的坐標(biāo)：

this._x = this._y = 0;

還有兩個(gè)事件對(duì)象函數(shù)用于添加移除事件：

this._fM = BindAsEventListener(this, this.Move);this._fS = Bind(this, this.Stop);

分別是拖動(dòng)程序和停止拖動(dòng)程序。拖放對(duì)象的position必須是absolute絕對(duì)定位：

this.Drag.style.position = “absolute”;

最后把Start開始拖放程序綁定到拖放對(duì)象mousedown事件：

addEventHandler(this.Drag, “mousedown”, BindAsEventListener(this, this.Start));

鼠標(biāo)在拖放對(duì)象按住，就會(huì)觸發(fā)Start程序，主要是用來準(zhǔn)備拖動(dòng)，在這里記錄鼠標(biāo)相對(duì)拖放對(duì)象的坐標(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)相對(duì)的坐標(biāo)值的差就可以得到拖放對(duì)象應(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è)簡(jiǎn)單的拖放程序就做好了，下面說說其他擴(kuò)展和細(xì)節(jié)部分。

拖放鎖定

鎖定分三種，分別是：水平方向鎖定(LockX)、垂直方向鎖定(LockY)、完全鎖定(Lock)。這個(gè)比較簡(jiǎn)單，水平和垂直方向的鎖定只要在Move判斷是否鎖定再設(shè)置left和top就行，如果是完全鎖定就直接返回。

if(!this.LockX){ this.Drag.style.left = …; }if(!this.LockY){ this.Drag.style.top = …; }

觸發(fā)對(duì)象

觸發(fā)對(duì)象是用來觸發(fā)拖放程序的。有的時(shí)候不需要整個(gè)拖放對(duì)象都用來觸發(fā)，這時(shí)就需要觸發(fā)對(duì)象了。使用了觸發(fā)對(duì)象后，進(jìn)行移動(dòng)的還是拖放對(duì)象，只是用觸發(fā)對(duì)象來觸發(fā)拖放（一般的使用是把觸發(fā)對(duì)象放到拖放對(duì)象里面）。

范圍限制

要設(shè)置范圍限制必須先把Limit設(shè)為true。范圍限制分兩種，分別是固定范圍和容器范圍限制，主要在Move程序中設(shè)置。原理是當(dāng)比較的值超過范圍時(shí)，修正left和top要設(shè)置的值使拖放對(duì)象能保持在設(shè)置的范圍內(nèi)。

固定范圍限制

容器范圍限制就是指定上下左右的拖放范圍。各個(gè)屬性的意思是：

上(mxTop)：top限制； 下(mxBottom)：top+offsetHeight限制； 左(mxLeft)：left限制； 右(mxRight)：left+offsetWidth限制。 如果范圍設(shè)置不正確，可能導(dǎo)致上下或左右同時(shí)超過范圍的情況，程序中有一個(gè)Repair程序用來修正范圍參數(shù)的。Repair程序會(huì)在程序初始化和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ù)修正移動(dòng)參數(shù)：

iLeft = Math.max(Math.min(iLeft, mxRight - this.Drag.offsetWidth), mxLeft);iTop = Math.max(Math.min(iTop, mxBottom - this.Drag.offsetHeight), mxTop);

對(duì)于左邊上邊要取更大的值，對(duì)于右邊下面就要取更小的值。

容器范圍限制

容器范圍限制的意思就是把范圍限制在一個(gè)容器_mxContainer內(nèi)。要注意的是拖放對(duì)象必須包含在_mxContainer中，因?yàn)槌绦蛑惺鞘褂孟鄬?duì)定位來設(shè)置容器范圍限制的（如果是在容器外就要用絕對(duì)定位，這樣處理就比較麻煩了），還有就是容器空間要比拖放對(duì)象大，這個(gè)就不用說明了吧。原理跟固定范圍限制差不多，只是范圍參數(shù)是根據(jù)容器的屬性的設(shè)置的。

當(dāng)設(shè)置了容器，會(huì)自動(dòng)把position設(shè)為relative來相對(duì)定位：

!this._mxContainer || CurrentStyle(this._mxContainer).position == “relative” || (this._mxContainer.style.position = “relative”);

注意relative要在獲取offsetLeft和offsetTop即設(shè)置_x和_y之前設(shè)置，offset才能正確獲取值。

由于是相對(duì)定位，對(duì)于容器范圍來說范圍參數(shù)上下左右的值分別是0、clientHeight、0、clientWidth。

clientWidth和clientHeight是容器可視部分的寬度和高度（詳細(xì)參考這里）。為了容器范圍能兼容固定范圍的參數(shù)，程序中會(huì)獲取容器范圍和固定范圍中范圍更小的值：

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è)置過拖放對(duì)象的left和top而容器沒有設(shè)置relative，在自動(dòng)設(shè)置relative時(shí)會(huì)發(fā)生移位現(xiàn)象，所以程序在初始化時(shí)就執(zhí)行一次Repair程序防止這種情況。因?yàn)閛ffsetLeft和offsetTop要在設(shè)置relative之前獲取才能正確獲取值，所以在Start程序中Repair要在設(shè)置_x和_y之前執(zhí)行。

因?yàn)樵O(shè)置相對(duì)定位的關(guān)系，容器_mxContainer設(shè)置過后一般不要取消或修改，否則很容易造成移位異常。

鼠標(biāo)捕獲

我在一個(gè)拖放實(shí)例中看到，即使鼠標(biāo)移動(dòng)到瀏覽器外面，拖放程序依然能夠執(zhí)行，仔細(xì)查看后發(fā)現(xiàn)是用了setCapture。鼠標(biāo)捕獲(setCapture)是這個(gè)程序的重點(diǎn)，作用是將鼠標(biāo)事件捕獲到當(dāng)前文檔的指定的對(duì)象。這個(gè)對(duì)象會(huì)為當(dāng)前應(yīng)用程序或整個(gè)系統(tǒng)接收所有鼠標(biāo)事件。使用很簡(jiǎn)單：

this._Handle.setCapture();

setCapture捕獲以下鼠標(biāo)事件：onmousedown、onmouseup、onmousemove、onclick、ondblclick、onmouseover和onmouseout。程序中主要是要捕獲onmousemove和onmouseup事件。msdn的介紹中還說到setCapture有一個(gè)bool參數(shù)，用來設(shè)置在容器內(nèi)的鼠標(biāo)事件是否都被容器捕獲。容器就是指調(diào)用setCapture的對(duì)象，大概意思就是：參數(shù)為true時(shí)（默認(rèn)）容器會(huì)捕獲容器內(nèi)所有對(duì)象的鼠標(biāo)事件，即容器內(nèi)的對(duì)象不會(huì)觸發(fā)鼠標(biāo)事件（跟容器外的對(duì)象一樣）；參數(shù)為false時(shí)容器不會(huì)捕獲容器內(nèi)對(duì)象的鼠標(biāo)事件，即容器內(nèi)的對(duì)象可以正常地觸發(fā)事件和取消冒泡。而對(duì)于容器外的鼠標(biāo)事件無論參數(shù)是什么都會(huì)被捕獲，可以用下面這個(gè)簡(jiǎn)單的例子測(cè)試一下（ie）：

<html><body onclick=”alert(2)”><div onmousemove=”alert(1)”>mouseover </div><script>document.body.setCapture(); </script></body></html>

這里的參數(shù)是true，一開始body會(huì)捕獲所有鼠標(biāo)事件，即使鼠標(biāo)經(jīng)過div也不會(huì)觸發(fā)onmousemove事件。換成false的話，div就可以捕獲鼠標(biāo)事件，就能觸發(fā)onmousemove事件了。

拖放結(jié)束后還要使用releaseCapture釋放鼠標(biāo)，這個(gè)可以放在Stop程序中：

this._Handle.releaseCapture();

setCapture是ie的鼠標(biāo)捕獲方法，對(duì)于ff也有對(duì)應(yīng)的captureEvents和releaseEvents方法。但這兩個(gè)方法只能由window來調(diào)用，而且muxrwc說這兩個(gè)方法在DOM2里已經(jīng)廢棄了，在ff里已經(jīng)沒用了。不過ff里貌似會(huì)自動(dòng)設(shè)置取消鼠標(biāo)捕獲，但具體的情形就不清楚了，找不到一個(gè)比較詳細(xì)的介紹，誰(shuí)有這方面的資料記得告訴我啊。

下面都是我的猜測(cè)，ff的鼠標(biāo)捕獲相當(dāng)于能自動(dòng)設(shè)置和釋放的document.body.setCapture(false)。因?yàn)槲覝y(cè)試下面的程序，發(fā)現(xiàn)ie和ff效果是差不多的：ie：

<html><body><div id=”aa” onmouseover=”alert(1)”> </div><script>document.body.onmousedown=function(){this.setCapture(false)}document.body.onmouseup=function(){this.releaseCapture()}document.onmousemove=function(){aa.innerHTML+=1}</script></body></html>

ff：

<html><body><div id=”aa” onmouseover=”alert(1)”> </div><script>document.onmousemove=function(){aa.innerHTML+=1}</script></body></html>

可惜沒有權(quán)威的資料參考就只能猜猜了，還有很多還沒有理解的地方以后再研究拉。

注意ff2下的鼠標(biāo)捕獲有一個(gè)bug，當(dāng)拖放對(duì)象內(nèi)部沒有文本內(nèi)容并拖放到瀏覽器外時(shí)捕獲就會(huì)失效。給拖放對(duì)象插入一個(gè)空文本，例如 <font size=’1px’>&nbsp; </font>就可以解決，不過這個(gè)bug在ff3已經(jīng)修正了。

焦點(diǎn)丟失

一般情況下，鼠標(biāo)捕獲都能正常捕獲事件，但如果瀏覽器窗口的焦點(diǎn)丟失就會(huì)導(dǎo)致捕獲失效。我暫時(shí)測(cè)試到會(huì)導(dǎo)致焦點(diǎn)丟失的操作包括切換窗口(包括alt+tab)，alert和popup等彈出窗體。當(dāng)焦點(diǎn)丟失時(shí)應(yīng)該同時(shí)執(zhí)行Stop程序結(jié)束拖放，但當(dāng)焦點(diǎn)丟失就不能捕獲mouseup事件也就是不能觸發(fā)_fS。還好ie有onlosecapture事件會(huì)在捕獲失效時(shí)觸發(fā)，針對(duì)這個(gè)情況可以這樣設(shè)置：

addEventHandler(this._Handle, “l(fā)osecapture”, this._fS);

并在Stop程序中移除：

removeEventHandler(this._Handle, “l(fā)osecapture”, this._fS);

但ff沒有類似的方法，不過muxrwc找到一個(gè)替代losecapture的window.onblur事件，那么可以在Start程序中設(shè)置：

addEventHandler(window, “blur”, this._fS);

在Stop程序中移除：

removeEventHandler(window, “blur”, this._fS);

那ie也有window.onblur事件，那用window.onblur代替losecapture不就可以省一段代碼了嗎。接著我做了一些測(cè)試，發(fā)現(xiàn)基本上觸發(fā)losecapture的情況都會(huì)同時(shí)觸發(fā)window.onblur，看來真的可以。于是我修改程序用window.onblur代替losecapture，但測(cè)試后就出問題了，我發(fā)現(xiàn)如果我用alt+tab切換到另一個(gè)窗口，拖動(dòng)還可以繼續(xù)，但這個(gè)時(shí)候應(yīng)該是已經(jīng)丟失焦點(diǎn)了。

于是我逐一排除測(cè)試和程序代碼，結(jié)果發(fā)現(xiàn)如果使用了DTD，那么window.onblur會(huì)在再次獲得焦點(diǎn)時(shí)才會(huì)觸發(fā)。大家可以用下面這段代碼測(cè)試：

<!DOCTYPE html PUBLIC “//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”><script>window.onblur=function(){alert(1)} </script>

在切換到其他程序后，再切換回來才會(huì)觸發(fā)window.onblur，還有幾個(gè)比較怪異的狀況就不說了，反正ie用window.onblur是不理想的了。

默認(rèn)動(dòng)作

對(duì)選擇狀態(tài)的文本內(nèi)容、連接和圖片等進(jìn)行拖放操作會(huì)觸發(fā)系統(tǒng)的默認(rèn)動(dòng)作，例如ie中拖動(dòng)圖片鼠標(biāo)會(huì)變成禁止操作狀態(tài)，這樣會(huì)導(dǎo)致這個(gè)拖放程序執(zhí)行失敗。

不過ie在設(shè)置了setCapture之后，通過用戶界面用鼠標(biāo)進(jìn)行拖放操作和內(nèi)容選擇都會(huì)被禁止。意思就是setCapture之后就不能對(duì)文檔內(nèi)容進(jìn)行拖放和選擇，注意這里的拖放是指系統(tǒng)的默認(rèn)動(dòng)作，例如ondragstart就不會(huì)被觸發(fā)。不過如果setCapture的參數(shù)是false的話，容器內(nèi)的對(duì)象還是可以觸發(fā)事件的（具體看鼠標(biāo)捕獲部分），所以setCapture的參數(shù)要設(shè)成true或保留默認(rèn)值。

而ff的鼠標(biāo)捕獲沒有這個(gè)功能，但可以用preventDefault來取消事件的默認(rèn)動(dòng)作來解決：

oEvent.preventDefault();

ps：據(jù)說使用preventDefault會(huì)出現(xiàn)mouseup丟失的情況，但我在ff3中測(cè)試沒有發(fā)現(xiàn)，如果各位發(fā)現(xiàn)任何mouseup丟失的情況，務(wù)必告訴我啊。

清除選擇

ie在設(shè)置setCapture之后內(nèi)容選擇都會(huì)被禁止，但也因此不會(huì)清除在設(shè)置之前就已經(jīng)選擇的內(nèi)容，而且設(shè)置之后也能通過其他方式選擇內(nèi)容，例如用ctrl+a來選擇內(nèi)容。ps：onkeydown、onkeyup和onkeypress事件不會(huì)受到鼠標(biāo)捕獲影響。而ff在mousedown時(shí)就能清除原來選擇的內(nèi)容，但拖動(dòng)鼠標(biāo)，ctrl+a時(shí)還是會(huì)繼續(xù)選擇內(nèi)容。不過在丟棄了系統(tǒng)默認(rèn)動(dòng)作之后，這樣的選擇并不會(huì)對(duì)拖放操作造成影響，這里設(shè)置主要還是為了更好的體驗(yàn)。

以前我用禁止拖放對(duì)象被選擇的方法來達(dá)到目的，即ie中設(shè)置拖放對(duì)象的onselectstart返回false，在ff中設(shè)置樣式MozUserSelect(css:-moz-user-select)為none。但這種方法只能禁止拖放對(duì)象本身被選擇，后來找到個(gè)更好的方法清除選擇，不但不影響拖放對(duì)象的選擇效果，還能對(duì)整個(gè)文檔進(jìn)行清除：

ie:　document.selection.empty() ff:　window.getSelection().removeAllRanges() 為了防止在拖放過程中選擇內(nèi)容，所以把它放到Move程序中，下面是兼容的寫法：

window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();

margin

還有一個(gè)情況，當(dāng)拖放對(duì)象設(shè)置了margin，那么拖放的時(shí)候就會(huì)錯(cuò)位（給SimpleDrag的拖放對(duì)象設(shè)置margin就可以測(cè)試）。原因是在Start程序設(shè)置_x和_y時(shí)是使用offset獲取的，而這個(gè)值是包括margin的，所以在設(shè)置left和top之前要減去這個(gè)margin。但如果在Start程序中就去掉margin那么在Move程序中設(shè)置范圍限制時(shí)就會(huì)計(jì)算錯(cuò)誤，所以最好是在Start程序中獲取值：

this._marginLeft = parseInt(CurrentStyle(this.Drag).marginLeft) || 0;this._marginTop = parseInt(CurrentStyle(this.Drag).marginTop) || 0;

其中CurrentStyle是用來獲取最終樣式，詳細(xì)看這里的最終樣式部分。

在Move程序中設(shè)置值：

this.Drag.style.left = iLeft - this._marginLeft + “px”;this.Drag.style.top = iTop - this._marginTop + “px”;

要注意margin要在范圍修正只后再設(shè)置，否則會(huì)錯(cuò)位。

【透明背景bug】

在ie有一個(gè)透明背景bug（不知算不算bug），可以用下面的代碼測(cè)試：

<!DOCTYPE html PUBLIC “//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“><html><body><div onmousedown=”alert(1)” style=”border:10px solid #C4E3FD; width:50px; height:50px;position:absolute;”> </div></body></html>

會(huì)發(fā)現(xiàn)背景點(diǎn)擊觸發(fā)不了事件，不過點(diǎn)擊邊框的話還是可以觸發(fā)。為什么呢？再用下面的代碼測(cè)試：

<!DOCTYPE html PUBLIC “//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“><html><body style=”border:1px solid #FF0000;”><style>div{width:100px; height:100px; border:1px solid #000;} </style><div style=”position:relative;”><div onclick=”alert(1)” style=”border-color:#00f;margin:50px;”> </div><div onclick=”alert(2)” style=”border-color:#6f0;position:absolute;top:50px;”> </div></div></body></html>

應(yīng)該能看出個(gè)大概了，下面兩個(gè)div超出body（即超出紅色框）的部分就觸發(fā)不了事件。也就是說當(dāng)觸發(fā)事件的點(diǎn)，在body以外，而背景又是透明的，那么就會(huì)誤認(rèn)為觸發(fā)點(diǎn)是在了body外空白的地方，所以觸發(fā)不了事件。那解決的方法就是，使事件觸發(fā)點(diǎn)保持在body內(nèi)，或者設(shè)置一個(gè)非透明背景。

那程序中只要給拖放對(duì)象設(shè)一個(gè)背景色就可以解決了，但有時(shí)需求正好是要透明（例如切割效果），那怎么辦呢？首先想到的是加上背景色后設(shè)置完全透明，但這樣連邊框，容器內(nèi)的對(duì)象等都完全透明了，這個(gè)不好。我想到的一個(gè)解決方法是在容器里面加一個(gè)層，覆蓋整個(gè)容器，并設(shè)置背景色和完全透明：

with(this._Handle.appendChild(document.createElement(”div”)).style){width = height = “100%”; backgroundColor = “#fff”; filter = “alpha(opacity:0)”;}

當(dāng)發(fā)現(xiàn)程序有這個(gè)bug出現(xiàn)，把程序可選參數(shù)Transparent設(shè)為true就會(huì)自動(dòng)插入這樣一個(gè)層了。各位如果有更好的方法請(qǐng)多多指點(diǎn)。

暫時(shí)就研究到這里，不過還有iframe，滾屏等這些還沒考慮到，等以后有需要了再來研究拉。