|
清除選擇
ie在設置setCapture之后內(nèi)容選擇都會被禁止，但也因此不會清除在設置之前就已經(jīng)選擇的內(nèi)容，而且設置之后也能通過其他方式選擇內(nèi)容，
例如用ctrl+a來選擇內(nèi)容。
ps：onkeydown、onkeyup和onkeypress事件不會受到鼠標捕獲影響。
而ff在mousedown時就能清除原來選擇的內(nèi)容，但拖動鼠標，ctrl+a時還是會繼續(xù)選擇內(nèi)容。
不過在丟棄了系統(tǒng)默認動作之后，這樣的選擇并不會對拖放操作造成影響，這里設置主要還是為了更好的體驗。
以前我用禁止拖放對象被選擇的方法來達到目的，即ie中設置拖放對象的onselectstart返回false，在ff中設置樣式MozUserSelect(css:-moz-user-select)為none。
但這種方法只能禁止拖放對象本身被選擇，后來找到個更好的方法清除選擇，不但不影響拖放對象的選擇效果，還能對整個文檔進行清除：
- ie: document.selection.empty()
- ff: window.getSelection().removeAllRanges()
為了防止在拖放過程中選擇內(nèi)容，所以把它放到Move程序中，下面是兼容的寫法：
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
margin
還有一個情況，當拖放對象設置了margin，那么拖放的時候就會錯位（給SimpleDrag的拖放對象設置margin就可以測試）。
原因是在Start程序設置_x和_y時是使用offset獲取的，而這個值是包括margin的，所以在設置left和top之前要減去這個margin。
但如果在Start程序中就去掉margin那么在Move程序中設置范圍限制時就會計算錯誤，
所以最好是在Start程序中獲取值：
this._marginLeft = parseInt(CurrentStyle(this.Drag).marginLeft) || 0;
this._marginTop = parseInt(CurrentStyle(this.Drag).marginTop) || 0;
其中CurrentStyle是用來獲取最終樣式，詳細看這里的最終樣式部分。
在Move程序中設置值：
this.Drag.style.left = iLeft - this._marginLeft + "px";
this.Drag.style.top = iTop - this._marginTop + "px";
要注意margin要在范圍修正只后再設置，否則會錯位。
【透明背景bug】
在ie有一個透明背景bug（不知算不算bug），可以用下面的代碼測試：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<html>
<body>
<div onmousedown="alert(1)" style="border:10px solid #C4E3FD; width:50px; height:50px;position:absolute;"> </div>
</body>
</html>
會發(fā)現(xiàn)背景點擊觸發(fā)不了事件，不過點擊邊框的話還是可以觸發(fā)。
為什么呢？再用下面的代碼測試：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<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>
應該能看出個大概了，下面兩個div超出body（即超出紅色框）的部分就觸發(fā)不了事件。
也就是說當觸發(fā)事件的點，在body以外，而背景又是透明的，那么就會誤認為觸發(fā)點是在了body外空白的地方，所以觸發(fā)不了事件。
那解決的方法就是，使事件觸發(fā)點保持在body內(nèi)，或者設置一個非透明背景。
那程序中只要給拖放對象設一個背景色就可以解決了，但有時需求正好是要透明（例如切割效果），那怎么辦呢？
首先想到的是加上背景色后設置完全透明，但這樣連邊框，容器內(nèi)的對象等都完全透明了，這個不好。
我想到的一個解決方法是在容器里面加一個層，覆蓋整個容器，并設置背景色和完全透明：
with(this._Handle.appendChild(document.createElement("div")).style){
width = height = "100%"; backgroundColor = "#fff"; filter = "alpha(opacity:0)";
}
當發(fā)現(xiàn)程序有這個bug出現(xiàn)，把程序可選參數(shù)Transparent設為true就會自動插入這樣一個層了。
各位如果有更好的方法請多多指點。
暫時就研究到這里，不過還有iframe，滾屏等這些還沒考慮到，等以后有需要了再來研究拉。
經(jīng)典論壇交流：
http://bbs.blueidea.com/thread-2896954-1-1.html
本文鏈接：http://m.95time.cn/tech/web/2008/6292.asp 
出處：藍色理想
責任編輯：bluehearts
上一頁 JavaScript 拖放效果分析 [4] 下一頁
◎進入論壇網(wǎng)頁制作、WEB標準化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 5 頁 JavaScript 拖放效果分析 [5]
