mozilla

版本 377973 / 拖放操作

  • 版本网址缩略名: DragDrop/Drag_and_Drop
  • 版本标题: 拖放操作
  • 版本 id: 377973
  • 创建于:
  • 创建者: 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
Fired when the mouse is first moved over an element while a drag is occuring. A listener for this event should indicate whether a drop is allowed over this location. If there are no listeners, or the listeners perform no operations, then a drop is not allowed by default. This is also the event to listen to if you want to provide feedback that a drop is allowed such as displaying a highlight or insertion marker. For information about this, see Specifying Drop Targets.
dragover
This event is fired as the mouse is moved over an element when a drag is occuring. Much of the time, the operation that occurs during a listener will be the same as the dragenter event. For information about this, see Specifying Drop Targets.
dragleave
This event is fired when the mouse leaves an element while a drag is occuring. Listeners should remove any highlighting or insertion markers used for drop feedback.
drag
This event is fired at the source of the drag, that is, the element where dragstart was fired, during the drag operation.
drop
The drop event is fired on the element where the drop was occured at the end of the drag operation. A listener would be responsible for retrieving the data being dragged and inserting it at the drop location. This event will only fire if a drop is desired. It will not fire if the user cancelled the drag operation, for example by pressing the Escape key, or if the mouse button was released while the mouse was not over a valid drop target. For information about this, see Performing a Drop.
dragend
The source of the drag will receive a dragend event when the drag operation is complete, whether it was successful or not. See Finishing a Drag for more information.
{{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>
    Fired when the mouse is first moved over an element while a drag is occuring. A listener for this event should indicate whether a drop is allowed over this location. If there are no listeners, or the listeners perform no operations, then a drop is not allowed by default. This is also the event to listen to if you want to provide feedback that a drop is allowed such as displaying a highlight or insertion marker. For information about this, see <a href="/en-US/docs/DragDrop/Drag_Operations#droptargets" title="Specifying Drop Targets">Specifying Drop Targets</a>.</dd>
  <dt>
    <code>dragover</code></dt>
  <dd>
    This event is fired as the mouse is moved over an element when a drag is occuring. Much of the time, the operation that occurs during a listener will be the same as the dragenter event. For information about this, see <a href="/en-US/docs/DragDrop/Drag_Operations#droptargets" title="Specifying Drop Targets">Specifying Drop Targets</a>.</dd>
  <dt>
    <code>dragleave</code></dt>
  <dd>
    This event is fired when the mouse leaves an element while a drag is occuring. Listeners should remove any highlighting or insertion markers used for drop feedback.</dd>
  <dt>
    <code>drag</code></dt>
  <dd>
    This event is fired at the source of the drag, that is, the element where <code>dragstart</code> was fired, during the drag operation.</dd>
  <dt>
    <code>drop</code></dt>
  <dd>
    The <code>drop</code> event is fired on the element where the drop was occured at the end of the drag operation. A listener would be responsible for retrieving the data being dragged and inserting it at the drop location. This event will only fire if a drop is desired. It will not fire if the user cancelled the drag operation, for example by pressing the Escape key, or if the mouse button was released while the mouse was not over a valid drop target. For information about this, see <a href="/en-US/docs/DragDrop/Drag_Operations#drop" title="Performing a Drop">Performing a Drop</a>.</dd>
  <dt>
    <code>dragend</code></dt>
  <dd>
    The source of the drag will receive a dragend event when the drag operation is complete, whether it was successful or not. See <a href="/en-US/docs/DragDrop/Drag_Operations#dragend" title="Finishing a Drag">Finishing a Drag</a> for more information.</dd>
</dl>
<div>
  {{HTML5ArticleTOC}}</div>
恢复到这个版本