HTML5 拖放

1、创建拖放对象（draggable 属性）

通过 draggable 告诉浏览器哪些元素需要实现拖拽功能有三个可选值：    true： 元素可以被拖拽    false：元素不能被拖拽    auto：浏览器自己判断元素是否能被拖拽 ( 默认 )

2、对象拖放事件（三个事件的目标都是被拖动的元素）

dragstart：按下鼠标键并开始移动时触发drag：在元素拖拽过程中持续触发dragend：元素拖拽停止时触发对象拖放事件流程：ondragstart->drag->dragend

3、投放区事件流程
元素被拖动到有效的放置目标时，下列事件会依次发生：
1. dragenter：当拖拽对象进入投放区时触发
2. dragover ：拖拽对象在投放区内移动时持续触发
3. dragleave：元素被拖出了投放区时触发
4. drop ：拖拽对象投放在投放区时触发

4、dataTransfer对象方法（event对象属性）、该对象专门用于携带拖放过程中的数据。
（1）dataTransfer 对象–常用方法
setData ( 数据格式，数据 ) 将拖放元素的数据存入dataTransfer对象中
getData ( 数据格式 ) 读取存入dataTransfer对象中的数据
数据格式常用值为“Text”或“URL”
setDragImage (图标，图标距指针X轴偏移值，Y轴偏移值 )、指定一个图标，当拖动发生时，显示在光标下方

（2）dataTransfer 对象--常用属性    注意：        dropEffect属性搭配effectAllowed属性使用        在dragstart事件处理程序中设置effectAllowed属性        在dragover事件处理程序中设置dropEffect属性        dropEffect 的每个可能值都会导致光标显示为不同的符号        需要说明的是，除非“effectAllowed”属性值为“all”，“dropEffect”与“effectAllowed”属性值必须保持一致，否则，将不能显示设置的拖放效果。    1、dropEffect        表示被拖动的元素能够执行哪种放置行为        可能的值：            1、“none” : 不能把拖动的元素放在这里            2、“move”: 把拖动的元素移动到放置目标            3、“copy” : 把拖动的元素复制到放置目标                4、“link”   : 放置目标会打开拖动的元素（有URL）    2、effectAllowed    允许拖动元素的哪种dropEffect        允许值：            1、“copyLink” : 允许值为 copy 和 link 的 dropEffect            2、“copyMove”: 允许值为 copy 和 move 的 dropEffect            3、“linkMove” : 允许值为 link和 move 的 dropEffect            4、“all”   : 允许任意的 dropEffect    3、files   文件        dataTransfer.files：如果是拖放文件，则返回正在拖放的文件列表FileList        FileReader：专门用于读取文件，FileReader 接口提供一些读取文件的方法与一个包含读取结果的事件模型        FileReader.readAsDataURL方法：参数为要读取的文件对象，将文件读取为DataUrl        FileReader.onload事件：当读取文件成功完成的时候触发此事件，在事件触发后，你可以通过this.result来获取读取的文件数据，如果是图片，将返回base64格式的图片数据。

5、常用分享工具
1. jiathis：http://www.jiathis.com/
2. bshare：http://www.bshare.cn/
3. 百度：http://share.baidu.com/