1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
|
---
title: 拖拽
slug: Drag_and_Drop
translation_of: Archive/Mozilla/Drag_and_drop
---
<p>{{ Next("Drag and Drop JavaScript Wrapper") }}</p>
<p>{{ deprecated_header("gecko1.9.1") }}</p>
<div class="warning" style="font-size: 14px;">自 Gecko 1.9.1 (Firefox 3.5)起，此API已被官方正式弃用。<a href="/zh-CN/DragDrop/Drag_and_Drop" title="zh-CN/DragDrop/Drag and Drop">更新的、更简单、更便捷（portable）的API</a>应该被用来替换此API（should be used in their place）。</div>
<p>这部分描述了怎样实现可以拖拽和拖放到其他对象上的可拖拽对象。</p>
<h3 id="The_Drag_and_Drop_Interface" name="The_Drag_and_Drop_Interface" style="font-size: 1.71428571428571rem;">拖拽和拖放接口</h3>
<p>很多用户界面都允许用户在界面内拖拽某些具体的对象（Many user interfaces allow one to drag particular objects around within the interface）。举个例子来说，拖拽一些文件到其他目录下；或者以拖拽一个图标到另一个窗口的方式来打开这个图标所指代的文档。Mozilla 和 <a href="/zh-CN/XUL" title="zh-CN/XUL">XUL</a> 提供一些事件来处理用户试图拖拽对象时的状态。</p>
<p>用户以按住鼠标然后移动鼠标的方式开始拖拽。当用户释放鼠标时，拖拽过程停止。事件处理器可以在拖拽开始时、停止时、还有拖拽过程中间时被调用。</p>
<p>Mozilla 通过拖拽会话（drag session）实现了拖拽。当用户要求拖拽某个可拖拽对象时，开始一个拖拽会话（drag session）。由拖拽会话（drag session）更新鼠标指针的位置，并处理可拖拽对象最后拖放的位置。如果一个对象不可拖拽，则不会开始一个拖拽会话（drag session）。由于用户通常只有一个鼠标，所以同一时刻只有一个拖拽会话（drag session）处于使用状态。</p>
<p>注意，拖拽会话（drag session）可以由Mozilla本身或其他应用创建。Mozilla会转换需要的拖拽数据（will translate the data being dragged as needed）。</p>
<p>下面的列表描述了可以被调用的事件处理器，这些处理器可以绑定在任意元素上。You only need to put values for the handlers where you need to do something when the event occurs.</p>
<dl>
<dt>ondrag {{ Fx_minversion_inline(3) }}</dt>
<dd>周期性地调用，贯穿整个拖拽和拖放全程。</dd>
<dt>ondraggesture </dt>
<dd>当用户开始拖拽一个元素时被调用，确切地说是当用户按住鼠标按键并移动鼠标时。The script in this handler should set up a drag session.</dd>
<dt>ondragstart {{ Fx_minversion_inline(3) }} </dt>
<dd>An alias for <code>ondraggesture</code>; this is the HTML 5 spec name for the event and may be used in HTML or XUL; however, for backward compatibility with older versions of Firefox, you may wish to continue using <code>ondraggesture</code> in XUL.</dd>
<dt>ondragover </dt>
<dd>This event handler is called for an element when something is being dragged over top of it. If the object can be dropped on the element, the drag session should be notified.</dd>
<dt>ondragenter </dt>
<dd>Called for an element when the mouse pointer first moves over the element while something is being dragged. This might be used to change the appearance of the element to indicate to the user that the object can be dropped on it.</dd>
<dt>ondragexit </dt>
<dd>Called for an element when the mouse pointer moves out of an element while something is being dragged. The is also called after a drop is complete so that an element has a chance to remove any highlighting or other indication.</dd>
<dt>ondragdrop </dt>
<dd>This event handler is called for an element when something is dropped on the element. At this point, the user has already released the mouse button. The element can simply ignore the event or can handle it some way, such as pasting the dragged object into itself.</dd>
<dt>ondragend {{ Fx_minversion_inline(3) }} </dt>
<dd>Called when the drag operation is finished.</dd>
</dl>
<p>There are two ways that drag and drop events can be handled. This first involves using the drag and drop <a href="/zh-CN/XPCOM" title="zh-CN/XPCOM">XPCOM</a> interfaces directly. The second is to use a <a href="/zh-CN/Drag_and_Drop_JavaScript_Wrapper" title="zh-CN/Drag_and_Drop_JavaScript_Wrapper">JavaScript wrapper</a> object that handles some of this for you. The code for this wrapper can be found in a file named {{ Source("toolkit/content/nsDragAndDrop.js nsDragAndDrop.js") }} which is contained in the widget-toolkit (or global) package.</p>
<h3 id="XPCOM_Drag_and_Drop_interfaces" name="XPCOM_Drag_and_Drop_interfaces" style="font-size: 1.71428571428571rem;">XPCOM Drag and Drop interfaces</h3>
<p>Two interfaces are used to support drag and drop. The first is a drag service, <a href="/zh-CN/XPCOM_Interface_Reference/nsIDragService" title="zh-CN/nsIDragService">nsIDragService</a> and the second is the drag session, <a href="/zh-CN/XPCOM_Interface_Reference/nsIDragSession" title="zh-CN/nsIDragSession">nsIDragSession</a>.</p>
<p>The <a href="/zh-CN/XPCOM_Interface_Reference/nsIDragService" title="zh-CN/nsIDragService">nsIDragService</a> is responsible for creating drag sessions when a drag starts, and removing the drag session when the drag is complete. The function <code>invokeDragSession</code> should be called to start a drag inside an <code>ondraggesture</code> event handler. Once this function is called, a drag has started.</p>
<p>The function invokeDragSession takes four parameters, as described below:</p>
<pre class="eval" style="font-size: 14px;">invokeDragSession(element,transferableArray,region,actions)
</pre>
<dl>
<dt>element </dt>
<dd>A reference to the element that is being dragged. This can be retrieved by getting the property <code>event.target</code> during the event handler.</dd>
<dt>transferableArray </dt>
<dd>An array of <a href="/zh-CN/NsITransferable" title="zh-CN/NsITransferable">nsITransferable</a> objects, one for each item being dragged. An array is used because you might want to drag several objects at once, such as a set of files.</dd>
<dt>region </dt>
<dd>A region used for feedback indication. This should usually be set to null.</dd>
<dt>actions </dt>
<dd>The actions that the drag uses. This should be set to one of the following constants, or several added together. The action can be changed during the drag depending on what is being dragged over.</dd>
</dl>
<dl>
<dt>nsIDragService.DRAGDROP_ACTION_NONE </dt>
<dd>
<dl>
<dt>Used to indicate that no drag is valid.</dt>
<dt>nsIDragService.DRAGDROP_ACTION_COPY </dt>
<dd>The item being dragged should be copied to its dropped location.</dd>
<dt>nsIDragService.DRAGDROP_ACTION_MOVE </dt>
<dd>The item being dragged should be moved to its dropped location.</dd>
<dt>nsIDragService.DRAGDROP_ACTION_LINK </dt>
<dd>A link (or shortcut or alias) to the item being dragged should be created in the dropped location.</dd>
</dl>
</dd>
</dl>
<p>The interface {{ interface("nsIDragService") }} also provides the function <code>getCurrentSession</code> which can be called from within the drag event handlers to get and modify the state of the drag. The function returns an object that implements {{ interface("nsIDragSession") }}.</p>
<p>The interface <a href="/zh-CN/XPCOM_Interface_Reference/nsIDragSession" title="zh-CN/nsIDragSession">nsIDragSession</a> is used to get and set properties of the drag that is currently occuring. The following properties and methods are available:</p>
<dl>
<dt>canDrop </dt>
<dd>Set this property to <code>true</code> if the element the mouse is currently over can accept the object currently being dragged to be dropped on it. Set the value to <code>false</code> if it doesn't make sense to drop the object on it. This should be changed in the <code>ondragover</code> and <code>ondragenter</code> event handlers.</dd>
<dt>dragAction </dt>
<dd>Set to the current action to be performed, which should be one or more of the constants described earlier. This can be used to provide extra feedback to the user.</dd>
<dt>numDropItems </dt>
<dd>The number of items being dragged. For example, this will be set to 5 if five bookmarks are being dragged.</dd>
<dt>getData(transfer,index) </dt>
<dd>Get the data being dragged. The first argument should be an <a href="/zh-CN/NsITransferable" title="zh-CN/NsITransferable">nsITransferable</a> object to hold the data. The second argument, <code>index</code>, should be the index of the item to return.</dd>
<dt>sourceDocument </dt>
<dd>The document where the drag started.</dd>
<dt>sourceNode </dt>
<dd>The <a href="/zh-CN/DOM" title="zh-CN/DOM">DOM</a> node where the drag started.</dd>
<dt>isDataFlavorSupported(flavor) </dt>
<dd>Returns <code>true</code> if the data being dragged contains data of the specified flavor.</dd>
</dl>
<p>{{ Next("Drag and Drop JavaScript Wrapper") }}</p>
<div class="originaldocinfo">
<h2 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h2>
<ul>
<li>Author(s): <a class="link-mailto" href="mailto:enndeakin@sympatico.ca">Neil Deakin</a></li>
<li>Original Document:</li>
<li>Copyright Information: Copyright (C) <a class="link-mailto" href="mailto:enndeakin@sympatico.ca">Neil Deakin</a></li>
</ul>
</div>
<div class="originaldocinfo">
<ul>
<li> </li>
</ul>
</div>
|
