html5 拖拽事件

拖拽包含了兩個大的操做，拖拽以及釋放

拖拽：drag

釋放：drop

參考w3c的拖拽事件，瞭解一下拖拽事件的全部不一樣部分，這是按照拖拽的過程進行的解釋

1.把元素設置爲可拖拽

  設置元素的屬性draggable 爲true

2.拖拽什麼

  ondragstart和setData 規定當元素拖拽時進行的操做

3.被拖拽的元素放到哪裏

  ondragover 規定在何處放置被拖拽的元素    

  默認地，沒法將數據/元素放置到其餘元素中。若是須要設置容許放置，咱們必須阻止對元素的默認處理方式。

  這要經過調用 ondragover 事件的 event.preventDefault() 方法：

event.preventDefault()

 4.進行放置

  當放置被拖數據時，會發生 drop 事件。

  以後看 馮曉東的博客，他把這些方法按照源對象和目標對象的維度又進行了一下區分

  被拖動的源對象能夠觸發的事件：

  (1)ondragstart：源對象開始被拖動

  (2)ondrag：源對象被拖動過程當中(鼠標可能在移動也可能未移動)

  (3)ondragend：源對象被拖動結束

  拖動源對象能夠進入到上方的目標對象能夠觸發的事件：

  (1)ondragenter：目標對象被源對象拖動着進入

  (2)ondragover：目標對象被源對象拖動着懸停在上方

  (3)ondragleave：源對象拖動着離開了目標對象

  (4)ondrop：源對象拖動着在目標對象上方釋放/鬆手

 

 

                             ·········以上是對事件的簡單介紹，，具體實現demo見下一隨筆