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無效的情況下，不會觸發拖拽事件的。暫時還未找到相關文件。求真相

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

其實手機上的使用已經非常頻繁，舉個例子，用手指選中一張圖片，然後將圖片拖到回收站，這就是一個完整的拖拽過程。細分一下，大致可以分為如下幾個步驟：

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

在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無效的情況下，不會觸發拖拽事件的。暫時還未找到相關文件。求真相