拖拽

  • 版本网址缩略名: DragDrop/拖拽
  • 版本标题: 拖拽
  • 版本 id: 271757
  • 创建于:
  • 创建者: hanyuxinting
  • 是否是当前版本?
  • 评论 48 words added

修订内容

Firefox and other Mozilla applications support a number of features for handling drag and drop. This allows you the user to click and hold the mouse button down over an element, drag it to another location, and release the mouse button to drop the element there. A translucent representation of what is being dragged will follow the mouse pointer during the drag operation. The drop location may be a different application. Web sites, extensions and XUL applications may make use of this functionality to customize what elements may be dragged, the drag feedback as well as specify where elements may be dropped.

This section covers drag and drop in Firefox 3.5 (Gecko 1.9.1) and later. For the older API for Firefox 3.0 and earlier, see the older API documentation.

拖拽基本原理

When a drag begins, a number of pieces of information may be provided:

  • the data to be dragged, which may be of a number of different formats. For example, textual data containing a string of text being dragged. For information about this, see Drag Data.
  • 需要拖拽的数据类型可能不同。如,文本数据包括文本字串。关于这方面,可参见拖拽数据
  • the drag feedback image which appears beside the mouse pointer during the drag operation. This image may be customized; however, most of the time, you would not specify this, and a default image will be generated based on the element where the mouse was pressed down. To learn more about drag feedback images, see Setting the Drag Feedback Image.
  • 在鼠标拖拽过程中出现的拖拽图片。该图片可自定义。但一般情况下,不需要指定,鼠标拖拽过程中会根据所拖拽的元素自动生成默认图片。详见: 设置拖拽反馈图片
  • 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.

参见 DataTransfer

拖拽事件

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.

在拖拽操作的不同阶段,会触发不同的事件。需要注意的是只有拖拽事件被触发,鼠标事件类似 mousemove 之类是不会被触发的。

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

拖拽事件的属性 dataTransfer 包含拖拽过程中的数据。

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.
拖拽开始时触发。该事件中,侦听者将为拖拽过程设置拖拽数据或图片等信息。详见: 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.
鼠标在元素上移动时触发。侦听事件同 dragenter 。详见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.
该事件在拖拽源上触发。该拖拽源即是 dragstart 触发的元素。
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.
拖拽操作结束时,该事件将在drop事件发生的元素上触发。侦听者将会处理已获取的拖拽数据,并将其插入到drop位置。该事件只有在需要drop时触发。如果取消拖拽操作,将不会触发该事件,如按下 ESC 键;如果鼠标在一个无效的drop目标上释放时,同样也不触发该事件。详见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.
当拖拽操作完成时,拖拽源将获取 dragend 事件,不管其是否成功。详见Finishing a Drag

{{ languages( { "ja": "Ja/DragDrop/Drag_and_Drop" }, { "fr": "Fr/DragDrop/Drag_and_Drop" } ) }}

修订版来源

<p>Firefox and other Mozilla applications support a number of features for handling drag and drop. This allows you the user to click and hold the mouse button down over an element, drag it to another location, and release the mouse button to drop the element there. A translucent representation of what is being dragged will follow the mouse pointer during the drag operation. The drop location may be a different application. Web sites, extensions and XUL applications may make use of this functionality to customize what elements may be dragged, the drag feedback as well as specify where elements may be dropped.</p>
<div class="note">This section covers drag and drop in Firefox 3.5 (Gecko 1.9.1) and later. For the older API for Firefox 3.0 and earlier, see the <a href="/en/Drag_and_Drop" title="Older Drag and Drop API">older API documentation</a>.</div>
<h2 id=".E6.8B.96.E6.8B.BD.E5.9F.BA.E6.9C.AC.E5.8E.9F.E7.90.86">拖拽基本原理</h2>
<p>When a drag begins, a number of pieces of information may be provided:</p>
<ul> <li>the data to be dragged, which may be of a number of different formats. For example, textual data containing a string of text being dragged. For information about this, see <a href="/En/DragDrop/Drag_Operations#dragdata" title="Drag Data">Drag Data</a>.</li> <li>需要拖拽的数据类型可能不同。如,文本数据包括文本字串。关于这方面,可参见<a href="/En/DragDrop/Drag_Operations#dragdata" title="Drag Data">拖拽数据</a>。</li> <li>the drag feedback image which appears beside the mouse pointer during the drag operation. This image may be customized; however, most of the time, you would not specify this, and a default image will be generated based on the element where the mouse was pressed down. To learn more about drag feedback images, see <a href="/En/DragDrop/Drag_Operations#dragfeedback" title="Setting
    the Drag Feedback Image">Setting the Drag Feedback Image</a>.</li> <li>在鼠标拖拽过程中出现的拖拽图片。该图片可自定义。但一般情况下,不需要指定,鼠标拖拽过程中会根据所拖拽的元素自动生成默认图片。详见: <a href="/En/DragDrop/Drag_Operations#dragfeedback" 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/DragDrop/Drag_Operations#drageffects" title="Drag Effects">Drag Effects</a> for more details.</li> <li>允许拖拽效果。三种实现:拷贝,移动和链接。拖拽操作中,拖拽效果可以按需修改。详见:<a href="/En/DragDrop/Drag_Operations#drageffects" title="Drag Effects">拖拽效果</a>。</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/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/DragDrop/Recommended_Drag_Types" title="Recommended Drag Types">Recommended Drag Types</a>.</p>
<p>用于拖拽的常见数据类型列表,可参见:<a href="/En/DragDrop/Recommended_Drag_Types" title="Recommended Drag Types">推荐拖拽类型</a>。</p>
<p>A quick reference is available for the best practice for dragging the following kinds of items:</p>
<p>常见类型如下:</p>
<ul> <li><a href="/En/DragDrop/Recommended_Drag_Types#text" title="Text">Text</a></li> <li><a href="/En/DragDrop/Recommended_Drag_Types#link" title="Links">Links</a></li> <li><a href="/En/DragDrop/Recommended_Drag_Types#html" title="HTML and XML">HTML and XML</a></li> <li><a href="/En/DragDrop/Recommended_Drag_Types#file" title="Files">Files</a></li> <li><a href="/En/DragDrop/Recommended_Drag_Types#image" title="Images">Images</a></li> <li><a href="/En/DragDrop/Recommended_Drag_Types#node" title="Document Nodes">Document Nodes</a></li>
</ul>
<p>See <a href="/En/DragDrop/DataTransfer" title="DataTransfer">DataTransfer</a> for a reference to the DataTransfer object.</p>
<p>参见 <a href="/En/DragDrop/DataTransfer" title="DataTransfer">DataTransfer</a> 。</p>
<h2 id="events" name="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>在拖拽操作的不同阶段,会触发不同的事件。需要注意的是只有拖拽事件被触发,鼠标事件类似 mousemove 之类是不会被触发的。</p>
<p>The <a href="/En/DragDrop/DataTransfer" title="dataTransfer">dataTransfer</a> property of all drag events holds data about the drag and drop operation.</p>
<p>拖拽事件的属性 dataTransfer 包含拖拽过程中的数据。</p>
<dl> <dt>dragstart</dt> <dd>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 <a href="/En/DragDrop/Drag_Operations#dragstart" title="Starting a Drag Operation">Starting a Drag Operation</a>.<br> 拖拽开始时触发。该事件中,侦听者将为拖拽过程设置拖拽数据或图片等信息。详见: <a href="/En/DragDrop/Drag_Operations#dragstart" title="Starting a Drag Operation">Starting a Drag Operation</a>。</dd> <dt>dragenter</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/DragDrop/Drag_Operations#droptargets" title="Specifying Drop Targets">Specifying Drop Targets</a>.<br> 拖拽发生时,鼠标第一次悬停在元素上时触发。该事件的侦听者会指出拖拽是否允许悬停在该位置。如没有侦听者,或者侦听者不执行任何操作,则拖拽不被允许。</dd> <dt>dragover</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/DragDrop/Drag_Operations#droptargets" title="Specifying Drop Targets">Specifying Drop Targets</a>.<br> 鼠标在元素上移动时触发。侦听事件同 dragenter 。详见<a href="/En/DragDrop/Drag_Operations#droptargets" title="Specifying Drop Targets">Specifying Drop Targets</a>。</dd> <dt>dragleave</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.<br> 鼠标离开元素时触发。侦听者需要删除用于标识拖拽反馈的高亮显示或者插入标识。</dd> <dt>drag</dt> <dd>This event is fired at the source of the drag, that is, the element where dragstart was fired, during the drag operation.<br> 该事件在拖拽源上触发。该拖拽源即是 dragstart 触发的元素。</dd> <dt>drop</dt> <dd>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 <a href="/En/DragDrop/Drag_Operations#drop" title="Performing a Drop">Performing a Drop</a>.<br> 拖拽操作结束时,该事件将在drop事件发生的元素上触发。侦听者将会处理已获取的拖拽数据,并将其插入到drop位置。该事件只有在需要drop时触发。如果取消拖拽操作,将不会触发该事件,如按下 ESC 键;如果鼠标在一个无效的drop目标上释放时,同样也不触发该事件。详见<a href="/En/DragDrop/Drag_Operations#drop" title="Performing a Drop">Performing a Drop</a>。</dd> <dt>dragend</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/DragDrop/Drag_Operations#dragend" title="Finishing a Drag">Finishing a Drag</a> for more information.<br> 当拖拽操作完成时,拖拽源将获取 dragend 事件,不管其是否成功。详见<a href="/En/DragDrop/Drag_Operations#dragend" title="Finishing a Drag">Finishing a Drag</a>。</dd>
</dl>
<p>{{ languages( { "ja": "Ja/DragDrop/Drag_and_Drop" }, { "fr": "Fr/DragDrop/Drag_and_Drop" } ) }}</p>
恢复到这个版本