|
這幾天做了一些drag&drop操作方面的工作，在這里把一些注意事項記錄下來，算是給自己備個忘，也給需要做類似工作的人留個樹陰。這里要討論的drag&drop是指使用IE提供的內置機制，而不是使用鼠標模擬的那種"假"drag&drop，比如移動一個div或span的效果那種。 要實現(xiàn)和控制drag&drop操作，那么首先第一點要弄清楚的是，到底哪些元素是可以在Web上被drag的？實際上IE默認給我們并讓我們drag的元素并不多，它們是：圖片、選中的文字（包括頁面文字和文字控件(input, textarea)中的文字）和連接（普通連接和錨點）。除此之外，別的Web元素默認都不支持drag操作（在這些元素上面drag其實就是選擇操作了），所以要實現(xiàn)對元素默認的drag&drop控制，只能選這3類元素來操作。 在BizStruct同學的斧正中提到，其實幾乎所有的Html元素都是支持drag&drop的（見其回復），在此表示由衷的感謝。 接下來，那么哪些元素又是可以接受drop操作呢？任何頁面上的可見元素都是可以接受drop操作的，而它們之間的不同只是在于默認的drop事件不一樣。比如，文字控件(input, textarea)的默認drop事件就是獲取drag操作傳過來的文字內容；iframe元素的默認drop操作是到航道drag操作傳過來的URL地址。當然絕大多數的Web元素的默認是操作是do nothing，什么也不做。 那么當進行drag&drop操作時，有那些是可控制和定制的內容呢？這里關于drag&drop提供了以下一些事件（我們把它們分為作用于來源對象和目的對象來分別討論），先討論主要作用于來源對象的事件： ·ondrag —— 在整個從drag動作開始，直道drop動作結束的過程中，都會觸發(fā)的一個事件。 ·ondragstart —— 在drag動作開始時，在來源對象上觸發(fā)的一個事件。 ·ondragend —— 在drop動作結束的時候，在來源對象上出發(fā)的一個事件。 而主要做要在目的對象上的事件： ·ondragenter —— 在drag動作進入某一有效目的元素時，在該目的元素上觸發(fā)的一個事件。 ·ondragover —— 在drag動作進入某一有效目的元素后，在該目的元素上觸發(fā)的一個事件。 ·ondragleave —— 在drag動作離開某一有效目的元素時，在該目的元素上觸發(fā)的一個事件。 ·ondrop —— 在任何有效目的元素上進行drop操作時，在該目的元素上觸發(fā)的一個事件。 這里的來源和目的的劃分不是絕對的，比如ondragover事件，在drag操作過程中，如果鼠標進入了來源對象中，同樣的也會觸發(fā)這個事件。這些事件觸發(fā)的順序是：來源對象 --> ondragstart --> ondrag --> ondragend；目的對象 --> ondragenter --> ondragover --> ( ondragleave | ondrap )。由于是分別在同一個對象上觸發(fā)的事件，所以這個順序很簡單。那么對于一個完整的從來源對象到目的對象的drag&drop操作來說，事件的觸發(fā)序列又是怎樣呢？如果src表示來源對象，des表示目的對象，那么事件觸發(fā)序列為： src:ondragstart --> src:ondrag --> des:ondragenter --> des:ondragover --> ( des:ondragleave | des:ondrop ) --> src:ondragend. 示例為：Drag Source Drop Destination // 如果alert窗口不響應鼠標點擊可以使用鍵盤的space鍵來確定窗口 了解了事件觸發(fā)順序后，定制drag&drop過程中鼠標的光標形狀也是非常重要的一個內容。因為用戶的drag&drop的整個過程都需要靠鼠標光標的形狀指導其進行操作，如果不能實時的調整光標為適合的型狀，drag&drop操作對用戶來說將無異于朦眼尋物。IE提供了用來控制的drag&drop過程中光標形狀的兩個屬性，它們是：effectAllowed和dropEffect。 其屬性分別為： ·effectAllowed: copy, link, move, copyLink, copyMove, all, none & uninitialized. ·dropEffect: copy, link, move, none. 前者effectAllowed是用來控制允許drag&drop操作類型的，所以這里的effect不是顯示的"效果"，而是是否可以執(zhí)行的"操作"，并且該屬性只能在ondragstart事件中進行初始化，之后再對其賦值將無效。當然如果只使用effectAllowed屬性，就已經可以達到控制光標形狀的作用了。只是effectAllowed屬性在處理復合操作時，比如copyLink, copyMove和all，會默認顯示靠前那個操作類型的鼠標類型。也就是說如果effectAllowed是copyMove，那么這是鼠標光標就是copy形狀。這下就知道為什么還要弄個dropEffect屬性了吧？不過這個dropEffect屬性中指定的effect，只能是之前effectAllowed允許的操作類型范圍中的值，否則沒有效果（顯示no-drop鼠標光標）。 示例為： Drag Source Drop Destination 如果查看代碼，會發(fā)現(xiàn)在src和des的對象元素中，在ondragover事件里除了對dropEffect賦以適當的值外，還有兩句話： event.returnValue=false;
event.cancelBubble=true; 只是由于頁面元素在接受dragover的時候，本身都有其默認的鼠標光標顯示型狀，所以為了讓用戶自定義的鼠標光標生效，就需要使事件event的returenValue為false值并停止當事件的冒泡(event.cancelBubble=true)。 到目前為止，一個完整的drag&drop過程就差數據傳遞了，其實忙活了半天，這才是藏在所有交互操作和顯示效果下面最重要的步驟。這個過程需要借助于IE提供的DHTML Data Transfer對象來完成，在window對象的屬性event對象中，分別有兩個Data Transfer對象各自的一個實例：一個叫dataTransfer，另一個叫clipboardData。這兩個對象實例的行為非常相似，但又有一些區(qū)別，clipboardData顧名思義，它使用操作系統(tǒng)的剪貼板來存取數據，并有3個方法；而dataTransfer通過操作一個自己的內部剪貼板來存取數據(每次ondragend事件觸發(fā)后就自動清空了)，除了有和clipboardData相同的3個方法外，還有兩個屬性(就是前面介紹的那兩個effectAllowed和dropEffect)。 我們這里不對clipboardData作更多的討論，繼續(xù)來看dataTransfer對象。它包含3個方法，它們是：setData(sDataFormat, sText), getData(sDataFormat)和clearData([sDataFormat])。它們更詳細的使用和參數請參閱MSDN，這里我只用它們來實現(xiàn)drag&drop的數據傳遞。 示例為：Drag Source Drop Destination 其實很簡單，就是在src的ondragstart中，調用event.dataTransfer.setData(‘TEXT‘, this.innerText)，然后再des的ondrop事件中，調用this.innerText = event.dataTransfer.getData(‘TEXT‘)就行了。 |
|
|
