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
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
|
---
title: DataTransfer
slug: Web/API/DataTransfer
translation_of: Web/API/DataTransfer
---
<div>{{APIRef("HTML Drag and Drop API")}}</div>
<p><code><strong>DataTransfer</strong></code> 物件被用來保存使用者於拖放操作過程中的資料，其中可能包含了一至多項資料以及多種資料類型。要瞭解拖放操作的更多細節，請參考<a href="/zh-TW/docs/Web/API/HTML_Drag_and_Drop_API">拖放操作</a>一文。</p>
<p><code>DataTransfer</code> 只能是每一種 {{domxref("DragEvent")}} 型別物件的共同屬性－{{domxref("DragEvent.dataTransfer","dataTransfer")}}，不能夠被單獨建立。</p>
<h2 id="屬性">屬性</h2>
<h3 id="Standard_properties">Standard properties</h3>
<dl>
<dt>{{domxref("DataTransfer.dropEffect")}}</dt>
<dd>Gets the type of drag-and-drop operation currently selected or sets the operation to a new type. The value must be <code>none</code> <code>copy</code> <code>link</code> or <code>move</code>.</dd>
<dt>{{domxref("DataTransfer.effectAllowed")}}</dt>
<dd>Provides all of the types of operations that are possible. Must be one of <code>none</code>, <code>copy</code>, <code>copyLink</code>, <code>copyMove</code>, <code>link</code>, <code>linkMove</code>, <code>move</code>, <code>all</code> or <code>uninitialized</code>.</dd>
<dt>{{domxref("DataTransfer.files")}}</dt>
<dd>Contains a list of all the local files available on the data transfer. If the drag operation doesn't involve dragging files, this property is an empty list.</dd>
<dt>{{domxref("DataTransfer.items")}} {{readonlyInline}}</dt>
<dd>Gives a {{domxref("DataTransferItemList")}} object which is a list of all of the drag data.</dd>
<dt>{{domxref("DataTransfer.types")}} {{readonlyInline}}</dt>
<dd>An array of {{domxref("DOMString","strings")}} giving the formats that were set in the {{event("dragstart")}} event.</dd>
</dl>
<h3 id="Gecko_properties">Gecko properties</h3>
<p>{{SeeCompatTable}}</p>
<div class="note"><strong>Note:</strong> All of the properties in this section are Gecko-specific.</div>
<dl>
<dt>{{domxref("DataTransfer.mozCursor")}}</dt>
<dd>Gives the drag cursor's state. This is primarily used to control the cursor during tab drags.</dd>
<dt>{{domxref("DataTransfer.mozItemCount")}} {{readonlyInline}}</dt>
<dd>Gives the number of items in the drag operation.</dd>
<dt>{{domxref("DataTransfer.mozSourceNode")}} {{readonlyInline}}</dt>
<dd>The {{ domxref("Node") }} over which the mouse cursor was located when the button was pressed to initiate the drag operation. This value is <code>null</code> for external drags or if the caller can't access the node.</dd>
<dt>{{domxref("DataTransfer.mozUserCancelled")}} {{readonlyInline}}</dt>
<dd>This property applies only to the <code>dragend</code> event, and is <code>true</code> if the user canceled the drag operation by pressing escape. It will be <code>false</code> in all other cases, including if the drag failed for any other reason, for instance due to a drop over an invalid location.</dd>
</dl>
<h2 id="方法">方法</h2>
<h3 id="Standard_methods">Standard methods</h3>
<dl>
<dt>{{domxref("DataTransfer.clearData()")}}</dt>
<dd>Remove the data associated with a given type. The type argument is optional. If the type is empty or not specified, the data associated with all types is removed. If data for the specified type does not exist, or the data transfer contains no data, this method will have no effect.</dd>
<dt>{{domxref("DataTransfer.getData()")}}</dt>
<dd>Retrieves the data for a given type, or an empty string if data for that type does not exist or the data transfer contains no data.</dd>
<dt>{{domxref("DataTransfer.setData()")}}</dt>
<dd>Set the data for a given type. If data for the type does not exist, it is added at the end, such that the last item in the types list will be the new format. If data for the type already exists, the existing data is replaced in the same position.</dd>
<dt>{{domxref("DataTransfer.setDragImage()")}}</dt>
<dd>Set the image to be used for dragging if a custom one is desired.</dd>
</dl>
<h3 id="Gecko_methods">Gecko methods</h3>
<p>{{SeeCompatTable}}</p>
<div class="note"><strong>Note:</strong> All of the methods in this section are Gecko-specific.</div>
<dl>
<dt>{{domxref("DataTransfer.addElement()")}}</dt>
<dd>Sets the drag source to the given element.</dd>
<dt>{{domxref("DataTransfer.mozClearDataAt()")}}</dt>
<dd>Removes the data associated with the given format for an item at the specified index. The index is in the range from zero to the number of items minus one.</dd>
<dt>{{domxref("DataTransfer.mozGetDataAt()")}}</dt>
<dd>Retrieves the data associated with the given format for an item at the specified index, or null if it does not exist. The index should be in the range from zero to the number of items minus one.</dd>
<dt>{{domxref("DataTransfer.mozSetDataAt()")}}</dt>
<dd>A data transfer may store multiple items, each at a given zero-based index. <code>mozSetDataAt()</code> may only be called with an index argument less than <code>mozItemCount</code> in which case an existing item is modified, or equal to <code>mozItemCount</code> in which case a new item is added, and the <code>mozItemCount</code> is incremented by one.</dd>
<dt>{{domxref("DataTransfer.mozTypesAt()")}}</dt>
<dd>Holds a list of the format types of the data that is stored for an item at the specified index. If the index is not in the range from 0 to the number of items minus one, an empty string list is returned.</dd>
</dl>
<h2 id="範例">範例</h2>
<p>Every method and property listed in this document has its own reference page and each reference page either directly includes an example of the interface or has a link to an example.</p>
<h2 id="規範">規範</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
<tr>
<td>{{SpecName('HTML WHATWG', 'interaction.html#datatransfer','DataTransfer')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td><code>mozCursor</code>, <code>mozItemCount</code>, <code>mozSourceNode</code>, <code>mozUserCancelled</code>, <code>addElement()</code>, <code>mozClearDataAt()</code>, <code>mozGetDataAt()</code>, <code>mozSetDataAt()</code> and <code>mozTypesAt</code> are Gecko specific.</td>
</tr>
<tr>
<td>{{SpecName('HTML5.1', 'editing.html#the-datatransfer-interface','DataTransfer')}}</td>
<td>{{Spec2('HTML5.1')}}</td>
<td>Not included in W3C HTML5 {{Spec2('HTML5 W3C')}}</td>
</tr>
<tr>
</tr>
</tbody>
</table>
<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Chrome</th>
<th>Edge</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari (WebKit)</th>
</tr>
<tr>
<td>Basic support</td>
<td>4</td>
<td>{{CompatVersionUnknown}}</td>
<td>3.5 <sup>[2]</sup><br>
{{CompatGeckoDesktop(52)}}<sup>[3]</sup></td>
<td>10 <sup>[1]</sup> <sup>[2]</sup></td>
<td>12</td>
<td>3.1 <sup>[2]</sup></td>
</tr>
<tr>
<td>{{domxref("DataTransfer.items", "items")}} property</td>
<td>4</td>
<td>{{CompatVersionUnknown}}</td>
<td>50</td>
<td>{{CompatNo}}</td>
<td>12</td>
<td>{{CompatNo}}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Android</th>
<th>Android Webview</th>
<th>Chrome for Android</th>
<th>Edge</th>
<th>Firefox Mobile (Gecko)</th>
<th>Firefox OS</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}<br>
{{CompatGeckoMobile(52)}}<sup>[3]</sup></td>
<td>{{CompatNo}}</td>
<td>{{CompatIE("10")}}[1][2]</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
</tr>
<tr>
<td>{{domxref("DataTransfer.items", "items")}} property</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatGeckoMobile(50)}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
</tr>
</tbody>
</table>
</div>
<p>[1] <a href="http://caniuse.com/#search=drag">Partial support refers to not supporting {{domxref("DataTransfer.setDragImage()")}} [CanIUse.com].</a></p>
<p>[2] Does not support {{domxref("DataTransfer.items")}} property.</p>
<p>[3] As of Firefox 52, the {{domxref("DataTransfer.types")}} property returns a frozen array of {{domxref("DOMString")}}s as per spec, rather than a {{domxref("DOMStringList")}}.</p>
<h2 id="參見">參見</h2>
<ul>
<li><a href="/Web/Guide/HTML/Drag_and_drop">Drag and drop</a></li>
<li><a href="/Web/Guide/HTML/Drag_operations">Drag Operations</a></li>
<li><a href="/Web/Guide/HTML/Recommended_Drag_Types">Recommended Drag Types</a></li>
<li><a href="/Web/Guide/HTML/Dragging_and_Dropping_Multiple_Items">Dragging and Dropping Multiple Items</a></li>
</ul>
|
