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
|
---
title: DragEvent
slug: Web/API/DragEvent
translation_of: Web/API/DragEvent
---
<div>{{APIRef("HTML Drag and Drop API")}}</div>
<p><strong><code>DragEvent</code></strong> 介面是一種 {{domxref("Event","DOM event")}}，定義了拖放操作時產生的事件物件。使用者藉由把指標裝置 (例如滑鼠) 放到有效區域並拖移到另一個新的位置 ( 如另外一個 DOM 元素 ) 來開始一個拖動的動作。 而應用程式可以自由地決定互動的方式來達到符合該應用程式的使用情境。</p>
<p class="note">This interface inherits properties from {{domxref("MouseEvent")}} and {{domxref("Event")}}.</p>
<h2 id="屬性">屬性</h2>
<dl>
<dt>{{domxref('DragEvent.dataTransfer')}} {{readonlyInline}}</dt>
<dd>The data that is transferred during a drag and drop interaction.</dd>
</dl>
<h2 id="建構式">建構式</h2>
<p class="note">Although this interface has a constructor, it is not possible to create a useful DataTransfer object from script, since {{domxref("DataTransfer")}} objects have a processing and security model that is coordinated by the browser during drag-and-drops.</p>
<dl>
<dt>{{domxref("DragEvent.DragEvent", "DragEvent()")}}</dt>
<dd>Creates a synthetic and untrusted DragEvent.</dd>
</dl>
<h2 id="事件類型">事件類型</h2>
<dl>
<dt>{{event('drag')}}</dt>
<dd>在『被選擇的物件』被拖曳時觸發。</dd>
<dt>{{event('dragend')}}</dt>
<dd>在『被選擇的物件』結束拖曳時觸發 (就是放開滑鼠鍵、或按下 Esc 鍵時)。</dd>
<dt>{{event('dragenter')}}</dt>
<dd>當『被選擇的物件』被拖曳到『可以當目標的物件』時, 在『進入』該目標物件上方的瞬間觸發。注意, 不是『被選擇的物件』觸發此事件, 而是『可以當目標的物件』。</dd>
<dt>{{event('dragexit')}}</dt>
<dd>This event is fired when an element is no longer the drag operation's immediate selection target.</dd>
<dt>{{event('dragleave')}}</dt>
<dd>當『被選擇的物件』被拖曳到『可以當目標的物件』時, 在『離開』該目標物件上方的瞬間觸發。注意, 不是『被選擇的物件』觸發此事件, 而是『可以當目標的物件』。</dd>
<dt>{{event('dragover')}}</dt>
<dd>當『被選擇的物件』被拖曳到『可以當目標的物件』的上方時觸發 (頻率大約每秒數次)。注意, 不是『被選擇的物件』觸發此事件, 而是『可以當目標的物件』 。</dd>
<dt>{{event('dragstart')}}</dt>
<dd>在『被選擇的物件』開始拖曳時觸發。</dd>
<dt>{{event('drop')}}</dt>
<dd>當『被選擇的物件』被拖曳、放到『目標物件』時觸發。注意, 不是『被選擇的物件』觸發此事件, 而是『目標物件』。</dd>
</dl>
<h2 id="通用事件處理器">通用事件處理器</h2>
<dl>
<dt>{{domxref('GlobalEventHandlers.ondrag')}}</dt>
<dd>A {{domxref('GlobalEventHandlers','global event handler')}} for the {{event('drag')}} event.</dd>
<dt>{{domxref('GlobalEventHandlers.ondragend')}}</dt>
<dd>A {{domxref('GlobalEventHandlers','global event handler')}} for the {{event('dragend')}} event.</dd>
<dt>{{domxref('GlobalEventHandlers.ondragenter')}}</dt>
<dd>A {{domxref('GlobalEventHandlers','global event handler')}} for the {{event('dragenter')}} event.</dd>
<dt>{{domxref('GlobalEventHandlers.ondragexit')}}</dt>
<dd>A {{domxref('GlobalEventHandlers','global event handler')}} for the {{event('dragexit')}} event.</dd>
<dt>{{domxref('GlobalEventHandlers.ondragleave')}}</dt>
<dd>A {{domxref('GlobalEventHandlers','global event handler')}} for the {{event('dragleave')}} event.</dd>
<dt>{{domxref('GlobalEventHandlers.ondragover')}}</dt>
<dd>A {{domxref('GlobalEventHandlers','global event handler')}} for the {{event('dragover')}} event.</dd>
<dt>{{domxref('GlobalEventHandlers.ondragstart')}}</dt>
<dd>A {{domxref('GlobalEventHandlers','global event handler')}} for the {{event('dragstart')}} event.</dd>
<dt>{{domxref('GlobalEventHandlers.ondrop')}}</dt>
<dd>A {{domxref('GlobalEventHandlers','global event handler')}} for the {{event('drop')}} event.</dd>
</dl>
<h2 id="範例">範例</h2>
<p>An Example of each property, constructor, event type and global event handlers is included in their respective reference page.</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#the-dragevent-interface", "DragEvent")}}</td>
<td>{{Spec2("HTML WHATWG")}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName("HTML5.1", "editing.html#the-dragevent-interface", "DragEvent")}}</td>
<td>{{Spec2("HTML5.1")}}</td>
<td>Initial definition</td>
</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>{{CompatGeckoDesktop("1.9.1")}}</td>
<td>10</td>
<td>12</td>
<td>3.1</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>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatIE("10")}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
</tr>
</tbody>
</table>
</div>
<h2 id="參見">參見</h2>
<p>{{page("/zh-TW/docs/Web/API/DataTransfer", "參見")}}</p>
|
