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见下一随笔