拖拽-12.19

1.源元素事件(要拖拽的文件)

  dragStart - 当鼠标开始拖放时被触发
  drag - 当鼠标拖放过程中被触发
  dragend 当鼠标拖放结束时被触发

2.目标元素事件(要拖拽到哪里去)

  dragover - 当鼠标到达目标元素被触发，会反复触发
  dragenter - 当鼠标拖放进入到目标元素内触发
  drop - 当鼠标实现拖放效果时被触发

HTML页面默认不允许拖放，称之为HTML页面的默认行为
解决：在dragover的事件中组织默认行为即可event.preventDefault();

3.dataTransfer对象(类似于window系统的剪切板功能)

• 获取到dataTransfer对象
  var trans = event.dataTransfer;

• 设置数据

   setData(type,data)
   type:类型，特指标识(id)，一般为字符串
   data:设置的数据内容
  

• 获取数据
  getData(type);

• 清除数据
  clearData(type)
  所有的数据内容，存储在浏览器内存中，当使用完数据内容时，要清除
  代码示例：

• 从本地拖拽文件到页面中

• 实现左右拖拽