html5 拖放

H5中拖拽属性

draggable: auto| true| false

拖动事件

 dragstart  在元素开始被拖动时触发
 dragend    在拖动操作完成时触发
 drag  在元素被拖动时触发

释放区事件

  dragenter 被拖动元素进入到释放区所占据得屏幕空间时触发
  dragover   当被拖动元素在释放区内移动时触发
  dragleave  当被拖动元素没有放下就离开释放区时触发
  drop   当被拖动元素在释放区里放下时触发

数据通信

  存数据    e.dataTransfer.setData('Text', data);
  text/html：文本文字格式
  text/plain：HTML代码格式
  text/xml：XML字符格式
  text/url-list：URL格式列表
  
  拿数据    e.dataTransfer.getData('Text');
  清除数据  e.dataTransfer.clearData();

dataTransfer

分为三模式:

• Read/write mode

    读/写模式，在dragstart事件中使用，可以添加新数据到drag data store中。

• Read-only mode

  只读模式，在drop事件中使用，可以读取被拖拽数据，不可添加新数据.

• Protected mode

   保护模式，在所有其他的事件中使用，数据的列表可以被枚举，但是数据本身不可用且不能添加新数据.

dropEffect属性只有搭配effectAllowed属性才有用。effectAllowed属性表示允许拖放元素的哪种dropEffect，effectAllowed属性可能的值如下。

• uninitialized：没有该被拖动元素放置行为。
• none：被拖动的元素不能有任何行为。
• copy：只允许值为“copy”的dropEffect。
• link：只允许值为“link”的dropEffect。
• move：只允许值为“move”的dropEffect。
• copyLink：允许值为“copy”和“link”的dropEffect。
• copyMove：允许值为“copy”和”link”的dropEffect。
• linkMove：允许职位“link”和”move”的dropEffect。
• all：允许任意dropEffect。

必须在ondraggstart事件处理程序中设置effectAllowed属性。

下次用react封装一个简单的拖放组件