www.diy567.com累了，去上面休息一下下,QQ空間，美文，非主流，網路日記，搞笑簡訊，祝福簡訊，熱門簡訊，有意思啊

這幾天做了一些drag&drop操作方面的工作，在這裡把一些注意事項記錄下來，算是給自己備個忘，也給需要做類似工作的人留個樹陰。這裡要討論的drag&drop是指使用IE提供的內建機制，而不是使用滑鼠模擬的那種"假"drag&drop，比如移動一個div或span的效果那種。

要實現和控制drag&drop操作，那麼首先第一點要弄清楚的是，到底哪些元素是可以在Web上被drag的？實際上IE預設給我們並讓我們drag的元素並不多，它們是：圖片

<Aonmouseover="status=this.innerText;returntrue;"ondragend="alert('src:on'+event.type)"onclick="returnfalse;">DragSource</A>

瞭解了事件觸發順序後，定製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不是顯示的"效果"，而是是否可以執行的"操作"，並且該屬性只能在ondragstart事件中進行初始化，之後再對其賦值將無效。當然如果只使用effectAllowed屬性，就已經可以達到控制游標形狀的作用了。只是effectAllowed屬性在處理複合操作時，比如copyLink, copyMove和all，會預設顯示靠前那個操作型別的滑鼠型別。也就是說如果effectAllowed是copyMove，那麼這是滑鼠游標就是copy形狀。這下就知道為什麼還要弄個dropEffect屬性了吧？不過這個dropEffect屬性中指定的effect，只能是之前effectAllowed允許的操作類型範圍中的值，否則沒有效果（顯示no-drop滑鼠游標）。

示例為： Drag SourceDrop Destination

<Aondragstart="event.dataTransfer.effectAllowed='copyMove';event.dataTransfer.dropEffect='move'"onmouseover="status=this.innerText;returntrue;"ondragover="event.dataTransfer.dropEffect='move';event.returnValue=false;event.cancelBubble=true;"onclick="returnfalse;">DragSource</A>

檢視程式碼時注意，你會發現在src和des的物件元素中，在ondragover事件裡除了對dropEffect賦以適當的值外，還有兩句話：

只是由於頁面元素在接受dragover的時候，本身都有其預設的滑鼠游標顯示型狀，所以為了讓使用者自定義的滑鼠游標生效，就需要使事件event的returenValue為false值並停止當事件的冒泡(event.cancelBubble=true)。

到目前為止，一個完整的drag&drop過程就差資料傳遞了，其實忙活了半天，這才是藏在所有互動操作和顯示效果下面最重要的步驟。這個過程需要藉助於IE提供的DHTML Data Transfer物件來完成，在window物件的屬性event物件中，分別有兩個Data Transfer物件各自的一個例項：一個叫dataTransfer，另一個叫clipboardData。這兩個物件例項的行為非常相似，但又有一些區別，clipboardData顧名思義，它使用作業系統的剪貼簿來存取資料，並有3個方法；而dataTransfer通過操作一個自己的內部剪貼簿來存取資料(每次ondragend事件觸發後就自動清空了)，除了有和clipboardData相同的3個方法外，還有兩個屬性(就是前面介紹的那兩個effectAllowed和dropEffect)。

我們這裡不對clipboardData作更多的討論，繼續來看dataTransfer物件。它包含3個方法，它們是：setData(sDataFormat, sText), getData(sDataFormat)和clearData([sDataFormat])。它們更詳細的使用和引數請參閱MSDN，這裡我只用它們來實現drag&drop的資料傳遞。

示例為：Drag SourceDrag Source

<Aondragstart="event.dataTransfer.effectAllowed='copyMove';event.dataTransfer.dropEffect='move';event.dataTransfer.setData('TEXT',this.innerText);"onmouseover="status=this.innerText;returntrue;"ondragover="event.dataTransfer.dropEffect='move';event.returnValue=false;event.cancelBubble=true;"onclick="returnfalse;">DragSource</A>

其實很簡單，就是在src的ondragstart中，呼叫event.dataTransfer.setData('TEXT', this.innerText)，然後再des的ondrop事件中，呼叫this.innerText = event.dataTransfer.getData('TEXT')就行了。

================================================================================

Window.event
DHTML Data Transfer物件: Window.event.dataTransfer
操作一個自己的內部剪貼簿來存取資料 (每次ondragend事件觸發後就自動清空了)
屬性
effectAllowed
值：copy, link, move, copyLink, copyMove, all, none & uninitialized
用來控制允許drag&drop操作型別的， 所以這裡的effect不是顯示的"效果"，而是是否可以執行的"操作"， 並且該屬性只能在ondragstart事件中進行初始化，之後再對其賦值將無效
dropEffect
值：copy, link, move, none
dropEffect屬性中指定的effect， 只能是之前effectAllowed允許的操作類型範圍中的值， 否則沒有效果（顯示no-drop滑鼠游標）
方法
setData(sDataFormat, sText)
getData(sDataFormat)
clearData([sDataFormat])
DHTML Data Transfer物件: Window.event.clipboardData
使用作業系統的剪貼簿來存取資料
屬性
effectAllowed
dropEffect
方法
setData(sDataFormat, sText)
getData(sDataFormat)
clearData([sDataFormat])