拖放操作

  • 版本网址缩略名: DragDrop/Drag_and_Drop
  • 版本标题: 拖放操作
  • 版本 id: 377977
  • 创建于:
  • 创建者: HeyMemo
  • 是否是当前版本?
  • 评论

修订内容

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获得更多信息。
{{HTML5ArticleTOC}}

修订版来源

<p>Firefox 与其他 Mozilla 应用支持多种功能来处理拖拽。这会允许用户在一个元素上点击并按住鼠标按钮,拖动它到别的位置,然后松开鼠标按钮将元素放到那儿。在拖动操作过程中,被拖动元素会以半透明形式展现,并跟随鼠标指针移动。放置元素的位置可能会在不同的应用内。网站,扩展和 XUL 应用可以利用这个功能来自定义哪些元素能够被拖动,该拖动反馈同样可以用来指定元素能够被放置在什么地方。</p>
<div class="note">
  本节介绍的拖放功能适用于 Firefox 3.5 (Gecko 1.9.1) 及更高版本。对于那些没有开放给网页的 适用于 Firefox 3.0 或更低版本的 API,请参考<a href="/en-US/docs/Drag_and_Drop" title="Older Drag and Drop API">过时 API 文档</a>。</div>
<h2 id=".E6.8B.96.E6.94.BE.E5.9F.BA.E7.A1.80">拖放基础</h2>
<p>当拖动开始时,你可能会得到大量的信息:</p>
<ul>
  <li>即将被拖动的数据,可能为多种类型。例如,文本型数据会包含被拖动文本的字符串。查阅<a href="/en-US/docs/DragDrop/Drag_Operations#Drag_Data" title="Drag Data">拖动数据</a>来了解更多内容。</li>
  <li>拖动过程中鼠标指针旁边会出现拖动反馈图片。该图片可以自定义;当然,大多数情况下你不会去指定它,而且默认图片会基于鼠标按钮按下的元素来生成。要了解更多关于拖动反馈图片的内容,请看<a href="/en-US/docs/DragDrop/Drag_Operations#Setting_the_drag_feedback_image" title="Setting the Drag Feedback Image">设置拖动反馈图片</a>。</li>
  <li>允许设置拖拽效果。有三种效果可以选择:copy 用来指明拖拽的数据将从当前位置复制到释放的位置;move 用来指明被拖拽的数据将被移动;link 用来指明将在源位置与投放位置之间建立某些形式的关联或连接。在拖拽的过程中,可以修改拖拽效果来指明在某些位置允许某些效果。如果允许,你将可以把数据释放到那个位置。请查阅<a href="https://developer.mozilla.org/en-US/docs/DragDrop/Drag_Operations#Drag_Effects" title="https://developer.mozilla.org/en-US/docs/DragDrop/Drag_Operations#Drag_Effects">Drag Effects</a>获得更多细节。</li>
</ul>
<p>Mozilla与Firefox支持许多不包含于标准拖拽模型中的特性。这些特性让你能够拖拽多个物件与非字符串数据。请查阅<a href="https://developer.mozilla.org/en-US/docs/DragDrop/Dragging_and_Dropping_Multiple_Items" title="https://developer.mozilla.org/en-US/docs/DragDrop/Dragging_and_Dropping_Multiple_Items">Dragging and Dropping Multiple Items</a>获得更多信息。</p>
<p>对于拖拽中使用的通用(common data types)数据类型列表,请参阅<a href="https://developer.mozilla.org/en-US/docs/DragDrop/Recommended_Drag_Types" title="https://developer.mozilla.org/en-US/docs/DragDrop/Recommended_Drag_Types">Recommended Drag Types</a>。</p>
<p>拖拽以下物件(items)的最佳实践可参考下面这些快速指引:</p>
<ul>
  <li><a href="/en-US/docs/DragDrop/Recommended_Drag_Types#text" title="Text">Text</a></li>
  <li><a href="/en-US/docs/DragDrop/Recommended_Drag_Types#link" title="Links">Links</a></li>
  <li><a href="/en-US/docs/DragDrop/Recommended_Drag_Types#html" title="HTML and XML">HTML and XML</a></li>
  <li><a href="/en-US/docs/DragDrop/Recommended_Drag_Types#file" title="Files">Files</a></li>
  <li><a href="/en-US/docs/DragDrop/Recommended_Drag_Types#image" title="Images">Images</a></li>
  <li><a href="/en-US/docs/DragDrop/Recommended_Drag_Types#node" title="Document Nodes">Document Nodes</a></li>
</ul>
<p>对于DataTransfer对象,可参考<a href="/en-US/docs/DragDrop/DataTransfer" title="DataTransfer">DataTransfer</a>。</p>
<h2 id="events" name="events">Drag events</h2>
<p>在进行拖放操作的不同阶段会触发数种事件。注意,在拖拽的时候只会触发拖拽的相关事件,鼠标事件,例如<code>mousemove</code>,是不会触发的。</p>
<p>拖拽事件的<a href="/en-US/docs/DragDrop/DataTransfer" title="dataTransfer">dataTransfer</a>属性存放了拖放操作中的相关数据。</p>
<dl>
  <dt>
    <code>dragstart</code></dt>
  <dd>
    当一个元素开始被拖拽的时候触发。用户拖拽的元素需要附加<code>dragstart</code>事件。在这个事件中,监听器将设置与这次拖拽相关的信息,例如拖动的数据和图像。更多关于这个事件的信息,请参考<a href="/en-US/docs/DragDrop/Drag_Operations#dragstart" title="Starting a Drag Operation">Starting a Drag Operation</a>。</dd>
  <dt>
    <code>dragenter</code></dt>
  <dd>
    当拖拽中的鼠标第一次进入一个元素的时候触发。这个事件的监听器需要指明是否允许在这个区域释放鼠标。如果没有设置监听器,或者监听器没有进行操作,则默认不允许释放。当你想要通过类似高亮或插入标记等方式来告知用户此处可以释放,你将需要监听这个事件。参考<a href="/en-US/docs/DragDrop/Drag_Operations#droptargets" title="Specifying Drop Targets">Specifying Drop Targets</a>来获得相关信息。</dd>
  <dt>
    <code>dragover</code></dt>
  <dd>
    当拖拽中的鼠标移动经过一个元素的时候触发。大多数时候,监听过程发生的操作与<code>dragenter</code>事件是一样的。更多信息请参考<a href="/en-US/docs/DragDrop/Drag_Operations#droptargets" title="Specifying Drop Targets">Specifying Drop Targets</a>。</dd>
  <dt>
    <code>dragleave</code></dt>
  <dd>
    当拖拽中的鼠标离开元素是触发。监听器需要将作为可释放反馈的高亮或插入标记去除。</dd>
  <dt>
    <code>drag</code></dt>
  <dd>
    这个事件在拖拽源触发。即在拖拽操作中触发<code>dragstart</code>事件的元素。</dd>
  <dt>
    <code>drop</code></dt>
  <dd>
    这个事件在拖拽操作结束释放时于释放元素上触发。一个监听器用来响应接收被拖拽的数据并插入到释放之地。这个事件只有在需要时才触发。当用户取消了拖拽操作时将不触发,例如按下了Escape(ESC)按键,或鼠标在非可释放目标上释放了按键。与此相关的信息,请参考<a href="/en-US/docs/DragDrop/Drag_Operations#drop" title="Performing a Drop">Performing a Drop</a>。</dd>
  <dt>
    <code>dragend</code></dt>
  <dd>
    拖拽源在拖拽操作结束将得到dragend事件对象,不管操作成功与否。参考<a href="/en-US/docs/DragDrop/Drag_Operations#dragend" title="Finishing a Drag">Finishing a Drag</a>获得更多信息。</dd>
</dl>
<div>
  {{HTML5ArticleTOC}}</div>
恢复到这个版本