拖放操作

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

修订内容

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

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

拖放基础

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

  • 即将被拖动的数据,可能为多种类型。例如,文本型数据会包含被拖动文本的字符串。查阅拖动数据来了解更多内容。
  • 拖动过程中鼠标指针旁边会出现拖动反馈图片。该图片可以自定义;当然,大多数情况下你不会去指定它,而且默认图片会基于鼠标按钮按下的元素来生成。要了解更多关于拖动反馈图片的内容,请看设置拖动反馈图片
  • drag effects that are allowed. Three such effects are possible: copy to indicate that the data being dragged will be copied from its present location to the drop location, move to indicate that the data being dragged will be moved, and link to indicate that some form of relationship or connection will be created between the source and drop locations. During the drag operation, the drag effects may be modified to indicate that certain effects are allowed at certain locations. If allowed, a drop may occur at that location. See Drag Effects for more details.

Mozilla and Firefox support a number of features not in the standard drag and drop model. These allow you to drag multiple items and drag non-string data. For more information, see Dragging and Dropping Multiple Items.

For a list of common data types used for drag and drop, see Recommended Drag Types.

A quick reference is available for the best practice for dragging the following kinds of items:

See DataTransfer for a reference to the DataTransfer object.

Drag events

A number of events are used which are fired during various stages of the drag and drop operation. Note that only drag events are fired; mouse events such as mousemove are not fired during a drag operation.

The dataTransfer property of all drag events holds data about the drag and drop operation.

dragstart
Fired on an element when a drag is started. The user is requesting to drag the element the dragstart event is fired at. During this event, a listener would set information such the drag data and image to be associated with the drag. For information about this, see 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="Drag_and_drop_basics">拖放基础</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>drag effects that are allowed. Three such effects are possible: <code>copy</code> to indicate that the data being dragged will be copied from its present location to the drop location, <code>move</code> to indicate that the data being dragged will be moved, and <code>link</code> to indicate that some form of relationship or connection will be created between the source and drop locations. During the drag operation, the drag effects may be modified to indicate that certain effects are allowed at certain locations. If allowed, a drop may occur at that location. See <a href="/en-US/docs/DragDrop/Drag_Operations#Drag_Effects" title="Drag Effects">Drag Effects</a> for more details.</li>
</ul>
<p>Mozilla and Firefox support a number of features not in the standard drag and drop model. These allow you to drag multiple items and drag non-string data. For more information, see <a href="/en-US/docs/DragDrop/Dragging_and_Dropping_Multiple_Items" title="Dragging and Dropping Multiple Items">Dragging and Dropping Multiple Items</a>.</p>
<p>For a list of common data types used for drag and drop, see <a href="/en-US/docs/DragDrop/Recommended_Drag_Types" title="Recommended Drag Types">Recommended Drag Types</a>.</p>
<p>A quick reference is available for the best practice for dragging the following kinds of 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>See <a href="/en-US/docs/DragDrop/DataTransfer" title="DataTransfer">DataTransfer</a> for a reference to the DataTransfer object.</p>
<h2 id="events" name="events">Drag events</h2>
<p>A number of events are used which are fired during various stages of the drag and drop operation. Note that only drag events are fired; mouse events such as <code>mousemove</code> are not fired during a drag operation.</p>
<p>The <a href="/en-US/docs/DragDrop/DataTransfer" title="dataTransfer">dataTransfer</a> property of all drag events holds data about the drag and drop operation.</p>
<dl>
  <dt>
    <code>dragstart</code></dt>
  <dd>
    Fired on an element when a drag is started. The user is requesting to drag the element the <code>dragstart</code> event is fired at. During this event, a listener would set information such the drag data and image to be associated with the drag. For information about this, see <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>
恢复到这个版本