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
|
---
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">这个接口继承 {{domxref("MouseEvent")}} 和{{domxref("Event")}}属性</p>
<h2 id="属性">属性</h2>
<dl>
<dt>{{domxref('DragEvent.dataTransfer')}} {{readonlyInline}}</dt>
<dd>在拖放交互期间传输的数据。</dd>
</dl>
<h2 id="构造函数">构造函数</h2>
<p class="note">虽然这个接口有一个构造函数，但不可能从脚本创建一个有用的 DataTransfer 对象，因为在拖放期间，有一个由浏览器分配的一个处理中和安全模式的{{domxref("DataTransfer")}}对象。</p>
<dl>
<dt>{{domxref("DragEvent.DragEvent", "DragEvent()")}}</dt>
<dd>创建合成和不可信的 DragEvent.</dd>
</dl>
<h2 id="事件类型">事件类型</h2>
<dl>
<dt>{{event('drag')}}</dt>
<dd>拖动元素或选择文本时触发此事件。</dd>
<dt>{{event('dragend')}}</dt>
<dd>当拖动操作结束时（释放鼠标按钮或按下退出键），会触发此事件。</dd>
<dt>{{event('dragenter')}}</dt>
<dd>当拖动的元素或选择文本输入有效的放置目标时，会触发此事件。</dd>
<dt>{{event('dragexit')}}</dt>
<dd>当元素不再是拖动操作的选择目标时触发此事件。</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>{{event('drag')}} 事件的{{domxref('GlobalEventHandlers','全局事件处理')}}。</dd>
<dt>{{domxref('GlobalEventHandlers.ondragend')}}</dt>
<dd>{{event('dragend')}} 事件的{{domxref('GlobalEventHandlers','全局事件处理')}}。</dd>
<dt>{{domxref('GlobalEventHandlers.ondragenter')}}</dt>
<dd>{{event('dragenter')}} 事件的{{domxref('GlobalEventHandlers','全局事件处理')}}。</dd>
<dt>{{domxref('GlobalEventHandlers.ondragexit')}}</dt>
<dd>{{event('dragexit')}} 事件的{{domxref('GlobalEventHandlers','全局事件处理')}}。</dd>
<dt>{{domxref('GlobalEventHandlers.ondragleave')}}</dt>
<dd>{{event('dragleave')}} 事件的{{domxref('GlobalEventHandlers','全局事件处理')}}。</dd>
<dt>{{domxref('GlobalEventHandlers.ondragover')}}</dt>
<dd>{{event('dragover')}} 事件的{{domxref('GlobalEventHandlers','全局事件处理')}}。</dd>
<dt>{{domxref('GlobalEventHandlers.ondragstart')}}</dt>
<dd>{{event('dragstart')}} 事件的{{domxref('GlobalEventHandlers','全局事件处理')}}。</dd>
<dt>{{domxref('GlobalEventHandlers.ondrop')}}</dt>
<dd>{{event('drop')}} 事件的{{domxref('GlobalEventHandlers','全局事件处理')}}。</dd>
</dl>
<h2 id="示例">示例</h2>
<p>每个属性，构造函数，事件类型和全局事件处理程序的示例都包含在它们各自的参考页中。</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>
<p><embed height="0" id="xunlei_com_thunder_helper_plugin_d462f475-c18e-46be-bd10-327458d045bd" type="application/thunder_download_plugin" width="0"></p>
|
