拖放

（一）Web拖动发展：

HTML5之前的拖动功能，是通过HTML和DOM公开的底层鼠标事件，结合CSS和JavaScript实现的近似拖放的系统。

通常设计逻辑步骤：

1、mousedown：用户按下鼠标开始操作。（拖动还是单击？）

2、mousemove：如果鼠标没有松开，就开始移动。（拖动还是选择？）

3、mouseover：鼠标移动到某个元素上。（想放置到此元素上？）

4、mouseout：鼠标移出某个区域。（需要绘制提醒？）

5、mouseup：释放鼠标按键，可能触发放置操作。（是否应该放置于此？）

缺点：鼠标处理逻辑复杂，要考虑到边界问题；拖动实现依赖与对系统的完全控制。

（二）HTML5拖放概念：

所拖动的区域或者项称为拖动源；

完成拖动，最后到达区域或者项称为放置目标（在释放鼠标前拖动会穿过一系列的放置目标）；

数据传输：规范中将数据传输描述为一组对象，这组对象用来公开拖动数据存储，拖动数据存储是拖放操作的基础。数据传输机制的工作原理类似于网络协议谈判，需要通过MIME类型来执行。

使用MIME类型目的在于让源和目标协商通过哪种格式最能满足放置目标的需要，正是这和协商过程使得拖动源和放置目标得以解耦，只需提供可选MIME类型，放置目标就能选出最合适格式放置。

（三）拖放事件：

1、事件传播和事件阻止：

事件从父元素流出，经过中间件，向下达到最先指定的子元素，就是“事件捕获过程”；事件通过“事件冒泡”反向流回元素层级中的高层节点。

    stopPropagation：可以阻止事件沿事件捕获链向下传递或者通过冒泡向上传递。

    preventDefault：可以调用此函数拦截，进而阻止默认动作发生。

2、拖放事件流：

    dragstart：用户开始拖动某个元素时，触发dragstart事件。是唯一一个支持dataTransfer通过setData调用设置数据的事件，意味着在dragstart处理中，必须设置可能适用的数据类型。

    drag：拖过操作中持续发生的事件，拖动反馈效果可以在此修改，禁止设置dataTransfer中数据。

    dragenter：拖动跨入页面元素时，触发该元素事件，适用于设置元素的反馈。

    dragleave：与dragenter对应，依据元素能否接收放置反馈。

    dragover：鼠标移动到某个元素上面时，频繁的调用此事件，在鼠标停留的目标上面使用。

    drop：用户释放鼠标，drop在鼠标停留目标上调用，基于dataTransfer对象结果，包含处理放置的代码。

    deagend：拖放事件链的最后一个事件，在拖动源上面触发，适用于清空拖动过程效果，调用时不考虑是否拖动完成。

3、设置元素可拖动，只需要添加一个属性：draggable。

    <div id="dragSource" draggable="true"></div>

4、传输与控制：

dataTransfer对象用于获取和设置实际的放置数据。

    setData(format, data)：在dragstart中调用注册MIME类型格式的传输项。

    getData(format)：函数可以获取指定类型的注册数据项。

    types：属性以数组形式返回所有当前注册的格式。

    items：属性返回所有项与相关格式的列表。

    files：属性返回与放置相关的所有文件。

    setDragImage(element, x, y)：使用已存在图像作为拖动图像，会出现在鼠标指针旁边，x/y表示鼠标相对与图片的位置。

    addElement(element)：提供页面元素作为参数，通知浏览器将参数作为拖动反馈图像绘制。

    effectAllowed：可设置copy、move、link等通知此处列出操作可能被选用。

    dropEffect：用来确定当前正在执行的操作是何种类型，或设置强制执行某种类型。

（四）拖放文件：

File API具有强大功能，能够网页中异步读取文件，将文件上传至服务器并跟踪上传状态，还可以将文件装换为网页元素。
和大多数拖放事件一样，无法在拖放事件中访问文件，出于安全考虑，尽管有些浏览器支持访问文件列表，但没有支持访问文件数据的。此外dragstart、drag和dragend不会触发，因为拖动源是文件，是文件系统自身的。

文件列表中文件项支持下列属性：

    name：带扩展名的文件全名；

    type：文件的MIME类型；

    size：以字节为单位的文件大小；

    lastModifieate：最后一次修改文件内容的时间戳。