15.1 Drag Drop API

15.1.1 Drag Drop API 的定义

Drag Drop API 是一种能够在浏览器中实现 DOM 元素的拖动与释放操作的 API。拖动与释放功能非常重要，它可以使 Web 应用程序具有接近原生桌面程序的易用性。众所周知，拖动与释放这一功能，其实在很久以前就已经在浏览器中得以实现。那么，和过去的拖动操作相比，这一 API 究竟有哪些不同之处呢？

实现方式上的区别

过去实现拖动与释放操作的基本方式基于下面的三个流程。其想法本身非常简单，不过，由于从鼠标移动开始，一直到更新 DOM 元素的显示为止，都需要自己管理，因此在实际使用时非常麻烦。

• 通过 mousedown 事件来捕捉 DOM 元素
• 通过 mousemove 事件来移动 DOM 元素
• 通过 mouseup 事件来释放 DOM 元素

而借助于 Drag Drop API，通过 dragstart 及 drop 等新添加的高度抽象的事件，就能够实现更为直观的拖动与释放操作。同时，由于拖动过程中基本的显示更新处理也都交由浏览器来进行，从而使开发者能够将精力集中于程序的开发，以实现运用了这一拖动操作的应用程序。

功能上的区别

当前，人们已经开发了大量支持拖动与释放操作的库。只要利用这些库，就能够很轻松地将跨浏览器支持的拖动与释放功能嵌入应用程序之内。在这种情况下，仍要坚持使用 Drag Drop API 的意义是什么呢？

答案就在 DataTransfer 中。DataTransfer 是对拖动操作中数据的接受与传递提供支持的 API。值得一提的是，通过 DataTransfer 传送数据有一些重要的优点。例如，数据的发送方（拖动起始处）与数据的接收方（释放处）并未限定于同一窗口内。

举例来说，可以由此实现将浏览器中的 DOM 元素拖向文本编辑器，或者将桌面上的文件拖向浏览器等操作。Drag Drop API消除了 Web 应用程序与原生应用程序之间的界限，是一种非常重要而充满魅力的功能。

15.1.2 接口

拖动事件

由 Drag Drop API 进行拖动与释放时，数据的发送方（拖动的元素）与接收方（释放的区域）这两者之间是一种松耦合的实现方式。通过对拖动的元素与释放的区域分别实现必要的事件处理程序，就能够完成拖动操作。

表15.1 能够设定拖动元素的事件处理程序

表15.2 能够设定释放区域的事件处理程序

这些拖动事件继承了鼠标事件的接口，因此也可以通过 screenX 及 clientX 等鼠标事件的属性来确认拖动过程中的位置。曾经使用鼠标事件来实现拖动与释放功能的人，应该已经对相应事件的使用方法有一个大概的理解了吧。

由于拖动事件将会根据拖动操作的状态和合适的时机被触发，因此不必由自己来管理与拖动释放相关的复杂的旗标。例如，drag 事件及 dragover 事件被限定于仅会在拖动操作中被触发。它们与 mouseover 事件不同，即使鼠标没有处于移动状态，也会被定期触发。

各个事件处理程序将会接收以 DataTransfer 形式保存的数据，并对 UI 显示的更新功能进行实现。在使用 Drag Drop API 进行拖动操作时，被拖动元素的捉取图像默认将会随着鼠标的移动而显示相应的内容，而拖动过程中的页面滚动等处理也都将由浏览器来解决。因此，如果没有特别的需求，在最初不考虑拖动中的 UI 显示处理也不会有什么问题。

DataTransfer

DataTransfer 是 Drag Drop API 中的核心部分。在所有的拖动事件的事件对象中，都含有 dataTransfer 属性。DataTransfer 最为重要的功能是接收数据，但同时也具有一些其他功能。

• 数据的接收
• 数据处理方式的指定
• 拖动图像的设定

表15.3 DataTransfer的接口一览

15.2 File API