前端------拖拽事件

拖拽事件

在H5中实现了拖拽技术，允许用户在网页内部拖拽以及浏览器与其他应用程序之间的拖拽，通过拖拽可以传递数据。

放置元素:默认是不可以放置得 取消默认行为 event.preventDefault()

拖放元素:设置当前元素为可拖    draggable='true'

拖放事件:拖放元素使用    
        dragstart(开始拖放) drag(正在拖放) dragend(拖放结束)

  用法：on拖放事件类型

放置事件:放置元素使用        
        dragenter(进入放置元素)  dragover(放置元素内移动) drop(放置在放置元素内)

：用法：on放置事件类型

在拖拽事件中，通过DataTransfer来实现数据交互，通过event.dataTransfer来获取DataTransfer实例
方法：setData、getData、clearData

在开始拖放事件 dragstart  传输数据:event.dataTransfer.setData(); 
在放置事件drop  获取数据:event.dataTransfer.getData(); 

    拖拽事件流:dragstart->drag->dragenter->dragover->drop->drapend

案例：