《HTML5程序设计》学习笔记
早期的拖放思路
结合css定位，通过创建复杂的javascript库和扎实的DOM事件知识，可以近似的实现一个拖放系统。
DOM事件：mousedown / mousemove / mouseover / mouseout / mouseup
缺点：
- 逻辑非常复杂，还要考虑边界情况
- 对系统的完全控制，和其他页面结合使用比较困难。
哈哈，HTML5解放世界啦！
HTML5 拖放
简介
（1）蓝图
- 拖动源
- 放置目标
拖放并不是单纯的把目标从一个地方移动另一个地方，其实是促成成功交互的操作过程中的反馈。
- 光标指示当前的位置是否可防置目标
- 用户提示是移动、链接或者复制
- 鼠标经过的地方样式改变，提示此处可以放置。
为满足以上的要求，浏览器在拖拽的每个过程中发起一系列的事件。
数据传输：一组对象，这个对象用来公开存储，拖动数据存储是拖放操作的基础。可以将传输数据理解成拖放的中央控制部分，用于反馈的图片以及数据自身的检索全部都在数据传输中管理。类似网络传输谈判，此时根本无需让拖动源和放置目标知道彼此的存在。此时其重要作用的就是MIME类型！
（2）MIME 多功能因特网邮件扩展服务
- text/plain
- image/png
- image/jpeg
- text/x-age 传递自定义的信息类型
事件
事件捕获：从父辈--→中间--→子辈
事件冒泡：反向
event.stopPropagation //阻止事件沿事件捕获链向下传递 或者 通过冒泡阶段向上传递。
event.preventDefault //阻止事件的默认行为，比如链接跳转。
事件流
dragstart事件：只能在这个事件的过程中支持dataTransfer通过setData来设置数据。这是为了安全考虑。编号1
drag事件：拖动过程中持续发生的事件。就是鼠标移动的过程中会反复的调用此事件。编号2
dragenter事件：拖动跨入了页面中新元素的时候触发，适用于设置拖放的放置反馈。编号3
dragleave事件：恢复放置反馈，与上一事件相对。编号4
dragover事件：不同于drag事件，此事件是在当前鼠标停留的目标上调用。编号5
drop事件：释放鼠标调用，要放置包含处理放置动作的代码。编号6
dragend：在拖动源中触发，适合清空拖动过程的状态。编号7
设置、传输和控制
设置可以拖动，很简单就一句话
<div id = "huang" draggable="true">
传输和控制
dataTransfer对象：用于获取和设置实际的放置数据。
函数与属性：
setData(formate, data)
getData(formate)
types 一数组形式返回所有当前注册的格式
items 返回所有想及其相关格式的列表
files 返回与放置相关的所有文件
clearData( )
//更改拖放反馈
setDragImage(element, x, y)：图片出现在鼠标的旁边，则x，y就是相对鼠标的偏移了。
addElement(element)通知浏览器将参数作为拖动反馈图像来绘制。？
//设置开发人员设置和查询
effecftAllowed( )设置参数，允许用户进行何种操作，copy/link/Move/组合
dropEffect( )
理论知识就这么多了，剩下的就是实战实战，再实战的过程了！