拖放操作

Firefox 与其他 Mozilla 应用支持多种功能来处理拖拽。这会允许用户在一个元素上点击并按住鼠标按钮,拖动它到别的位置,然后松开鼠标按钮将元素放到那儿。在拖动操作过程中,被拖动元素会以半透明形式展现,并跟随鼠标指针移动。放置元素的位置可能会在不同的应用内。网站,扩展和 XUL 应用可以利用这个功能来自定义哪些元素能够被拖动,该拖动反馈同样可以用来指定元素能够被放置在什么地方。

本节介绍的拖放功能适用于 Firefox 3.5 (Gecko 1.9.1) 及更高版本。对于那些没有开放给网页的 适用于 Firefox 3.0 或更低版本的 API,请参考过时 API 文档

拖放基础

当拖动开始时,你可能会得到大量的信息:

  • 即将被拖动的数据,可能为多种类型。例如,文本型数据会包含被拖动文本的字符串。查阅拖动数据来了解更多内容。
  • 拖动过程中鼠标指针旁边会出现拖动反馈图片。该图片可以自定义;当然,大多数情况下你不会去指定它,而且默认图片会基于鼠标按钮按下的元素来生成。要了解更多关于拖动反馈图片的内容,请看设置拖动反馈图片
  • 允许设置拖拽效果。有三种效果可以选择:copy 用来指明拖拽的数据将从当前位置复制到释放的位置;move 用来指明被拖拽的数据将被移动;link 用来指明将在源位置与投放位置之间建立某些形式的关联或连接。在拖拽的过程中,可以修改拖拽效果来指明在某些位置允许某些效果。如果允许,你将可以把数据释放到那个位置。请查阅Drag Effects获得更多细节。

Mozilla与Firefox支持许多不包含于标准拖拽模型中的特性。这些特性让你能够拖拽多个物件与非字符串数据。请查阅Dragging and Dropping Multiple Items获得更多信息。

对于拖拽中使用的通用(common data types)数据类型列表,请参阅Recommended Drag Types

拖拽以下物件(items)的最佳实践可参考下面这些快速指引:

对于DataTransfer对象,可参考DataTransfer

Drag events

在进行拖放操作的不同阶段会触发数种事件。注意,在拖拽的时候只会触发拖拽的相关事件,鼠标事件,例如mousemove,是不会触发的。

拖拽事件的dataTransfer属性存放了拖放操作中的相关数据。

dragstart
当一个元素开始被拖拽的时候触发。用户拖拽的元素需要附加dragstart事件。在这个事件中,监听器将设置与这次拖拽相关的信息,例如拖动的数据和图像。更多关于这个事件的信息,请参考Starting a Drag Operation
dragenter
当拖拽中的鼠标第一次进入一个元素的时候触发。这个事件的监听器需要指明是否允许在这个区域释放鼠标。如果没有设置监听器,或者监听器没有进行操作,则默认不允许释放。当你想要通过类似高亮或插入标记等方式来告知用户此处可以释放,你将需要监听这个事件。参考Specifying Drop Targets来获得相关信息。
dragover
当拖拽中的鼠标移动经过一个元素的时候触发。大多数时候,监听过程发生的操作与dragenter事件是一样的。更多信息请参考Specifying Drop Targets
dragleave
当拖拽中的鼠标离开元素时触发。监听器需要将作为可释放反馈的高亮或插入标记去除。
drag
这个事件在拖拽源触发。即在拖拽操作中触发dragstart事件的元素。
drop
这个事件在拖拽操作结束释放时于释放元素上触发。一个监听器用来响应接收被拖拽的数据并插入到释放之地。这个事件只有在需要时才触发。当用户取消了拖拽操作时将不触发,例如按下了Escape(ESC)按键,或鼠标在非可释放目标上释放了按键。与此相关的信息,请参考Performing a Drop
dragend
拖拽源在拖拽操作结束将得到dragend事件对象,不管操作成功与否。参考Finishing a Drag获得更多信息。

Document Tags and Contributors

Contributors to this page: ziyunfei, HeyMemo, xcffl, sunnylost
最后编辑者: HeyMemo,