dragstart drag dragend dragenter dragover dragleave drop

前端框架層出不窮，網頁上的效果愈來愈絢麗，製做絢麗的效果的成本愈來愈低，其中有種拖拽的效果是十分常見而且實用的。

其實手機上的使用已經很是頻繁，舉個例子，用手指選中一張圖片，而後將圖片拖到回收站，這就是一個完整的拖拽過程。細分一下，大體能夠分爲以下幾個步驟：

首先，選中目標；而後拖動目標；最後在指定區域釋放目標。

在javascript中有專門爲這個過程設置的事件， 若是這種方式可以獲得普及的話（兼容性問題不大，IE都兼容），就能夠替換到老舊的修改元素位置的方式實現拖動的方式。這樣作顯而易見的好處就是，老方法通常須要將元素設置爲絕對定位（absolute）而後將鼠標的偏移同步到被拖放元素；其次，老方法須要使用javascript高密度的修改DOM，效率低。

 

拖動過程須要從兩個角度分解這個動做，能夠想象這麼一個場景，咱們在地上劃出一個範圍，須要將桌子擡進去。

對於被拖動的桌子，須要拽住桌子，而後拖動，最後放下，在javascript對應的就是dragstart/drag/dragend（若是直接做爲屬性寫，須要在開頭加一個on）；對於目標區域來講，桌子有個進入區域的狀態，而後停留在上方的過程，最後是放到上面的狀態，那對應的是dragenter/dragover/drop，固然，若是桌子擡進去,在沒放下的狀況下又擡出來，那會觸發「擡離」的事件--dragleave。 拖動過程當中，dragenter/dragover/dragleave/drop會發生在拖動軌跡通過的任意元素身上。固然，假設目標區域是元素B，被拖動的是元素A，那麼給B綁定的事件，只有A被拖入B的時候纔會執行（fire/dispatch）。固然，大部分高級瀏覽器都會對圖片或者連接的dragend時刻有興趣。

若是不但願在拖動網頁上的圖片時，瀏覽器默認打開新窗口的話，須要對dragstart開刀，經過在dragstart事件函數中return false，就能夠達到這一目的。

拖動過程當中，拖動的內容是什麼，咱們也許會感興趣，那麼dataTransfer顯得尤其重要（將文件直接從電腦的文件系統中拽到瀏覽器中也能夠經過它實現）。

 

http://help.dottoro.com/external/examples/ljpncnwi/ondragstart_3.htm 這個demo能夠將流程看的較爲清晰。

文中的被拖動元素是指source element, 目標區域是指target element，不許確，能夠適當轉換一下。

ondragstart:

執行拖動操做時候，發生在被拖動的元素（或者一段文字）上，也是最拖動過程當中第一個觸發的事件。

若是一些文本被選中，能夠經過拖拽選中區域，在目標區域鬆手就能夠；默認狀況下，目標區域能夠是一個可編輯元素（textarea/input），處於可編輯模式下的元素/an element in editable mode---<div contenteditable="true">，或者是設計模式下的文檔/document in design mode。關於contentEditable和design mode的區別，能夠參考這裏。

ondrag：

被拖動元素在拖動期間會定時的觸發這一事件，即便沒有移到目標區域。

ondragend：

被拖動元素被「放下」的時候發生在其身上的事件。

ondragenter：

這是目標區域（元素）dragover的開端，只有鼠標移入了，纔會有懸浮的事件dragover。

ondragover：

和ondrag有點相似，也是高頻率觸發的事件，可是發生在目標區域，且發生在dragenter以後，dragleave以前。

ondragleave：

和ondragenter恰好相反，結束dragover。

ondrop：

被拖動元素被「放置」在目標區域的時候，也就是拖拽結束的時候，發生在目標區域的事件。

 

在實踐的過程當中，發如今Chrome中，若是img沒有src或者src無效的狀況下，不會觸發拖拽事件的。暫時還未找到相關文檔。求真相