html5 拖拽(drag)和f放置(drop)

知识要点

• HTML5 (drag&drop) API  (Event)
• 拖放数据（对象）：DataTransfer
• 拖放内容：setData getData
• 拖放效果（动作）：dropEffect、effectAllowd
• 拖放图像：setDargImage

学习目标

• 掌握html5原声拖放（drag& drop）API 与 拖放事件
• 了解拖放流程
• 学会解决拖放种的兼容

前置要求

• 原生dom操作
• 原生事件
  • 默认行为（阻止默认行为）
  • 　　事件冒泡（阻止事件冒泡）

什么是Drag与Drop?

• Drag：拖拉 拖拽
• Drop：放置  放下

在一个web页面中，选中文本，图像、链接默认是可拖拽的

当一段文本、图像或者链接或链接被拖动的时候，文本内容·图像·链接URL被设定为拖动数据。

这个功能很早就用了，但是没有提供对应接口来让我们对着种行为进行控制，Drag与Drop是html5 新增的拖放接口，提供了一套可以在页面中拖放的功能，

通过该功能，用户可以通过鼠标来拖动（可拖动）元素，并可以通过释放鼠标来设置这些元素（可放置）元素上。

注意：默认情况下，除了选中文本、图像、链接、其它元素都是不可拖动的