blob: ec2e64eee3326aa32aef72048d8904969d99757a (
plain)
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
|
---
title: DataTransfer.effectAllowed
slug: Web/API/DataTransfer/effectAllowed
translation_of: Web/API/DataTransfer/effectAllowed
---
<div>{{APIRef("HTML Drag and Drop API")}}</div>
<p><strong><code>DataTransfer.effectAllowed</code></strong> 属性指定拖放操作所允许的一个效果。<em>copy</em> 操作用于指示被拖动的数据将从当前位置复制到放置位置。<em>move操作用于指定被拖动的数据将被移动。 link</em>操作用于指示将在源和放置位置之间创建某种形式的关系或连接。</p>
<p>应该在{{event("dragstart")}}事件中设置此属性，以便为拖动源设置所需的拖动效果。在 {{event("dragenter")}} 和{{event("dragover")}} 事件处理程序中，该属性将设置为在{{event("dragstart")}} 事件期间分配的任何值，因此，可以使用<code>effectAllowed</code>来确定允许哪个效果。</p>
<p>给<code>effectAllowed</code>赋一个值，以使其在除{{event("dragstart")}} 之外的事件中无效。</p>
<h2 id="语法">语法</h2>
<pre class="syntaxbox"><var>dataTransfer</var>.effectAllowed;
</pre>
<h3 id="值">值</h3>
<p>表示允许的拖动操作{{domxref("DOMString")}} 。这个可能值是：</p>
<dl>
<dt>none</dt>
<dd>此项表示不允许放下</dd>
<dt>copy</dt>
<dd>源项目的复制项可能会出现在新位置。</dd>
<dt>copyLink</dt>
<dd>允许 <em>copy</em> 或者 <em>link</em> 操作。</dd>
<dt>copyMove</dt>
<dd>允许 <em>copy</em> 或者 <em>move</em> 操作。</dd>
<dt>link</dt>
<dd>可以在新地方建立与源的链接。</dd>
<dt>linkMove</dt>
<dd>允许 <em>link</em> 或者 <em>move</em> 操作。</dd>
<dt>move</dt>
<dd>一个项目可能被移动到新位置。</dd>
<dt>all</dt>
<dd>允许所有的操作。</dd>
<dt>uninitialized</dt>
<dd>效果没有设置时的默认值，则等同于 <em>all</em>。</dd>
</dl>
<p>分配一个没有效果的其他值给 <code>effectAllowed</code>，则保留原值。</p>
<p>Internet Explorer 会将该值改为小写。因此，<code>linkMove</code>将会变为<code>linkmove</code> ，等等。</p>
<h2 id="举个例子">举个例子</h2>
<p>此例子展示 <code>effectAllowed</code> 用法 和 {{domxref("DataTransfer.dropEffect", "dropEffect")}} 属性</p>
<pre class="brush: js"><!DOCTYPE html>
<html lang=en>
<title>Examples of DataTransfer.{dropEffect,effectAllowed} properties</title>
<meta content="width=device-width">
<style>
div {
margin: 0em;
padding: 2em;
}
#source {
color: blue;
border: 1px solid black;
}
#target {
border: 1px solid black;
}
</style>
<script>
function dragstart_handler(ev) {
console.log("dragStart: dropEffect = " + ev.dataTransfer.dropEffect + " ; effectAllowed = " + ev.dataTransfer.effectAllowed);
<code>// 将这个元素的id添加到drag载荷中，
// 以便drop事件知道将哪个元素添加到其树中。</code>
ev.dataTransfer.setData("text", ev.target.id);
ev.dataTransfer.effectAllowed = "move";
}
function drop_handler(ev) {
console.log("drop: dropEffect = " + ev.dataTransfer.dropEffect + " ; effectAllowed = " + ev.dataTransfer.effectAllowed);
ev.preventDefault();
<code>// 得到目标的id并且将移动的元素添加到目标DOM中</code>
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
function dragover_handler(ev) {
console.log("dragOver: dropEffect = " + ev.dataTransfer.dropEffect + " ; effectAllowed = " + ev.dataTransfer.effectAllowed);
ev.preventDefault();
// 设置 dropEffect 为 move
ev.dataTransfer.dropEffect = "move"
}
</script>
<body>
<h1>Examples <code>DataTransfer</code>.{<code>dropEffect</code>, <code>effectAllowed</code>} properties</h1>
<div>
<p id="source" ondragstart="dragstart_handler(event);" draggable="true">
Select this element, drag it to the Drop Zone and then release the selection to move the element.</p>
</div>
<div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">Drop Zone</div>
</body>
</html>
</pre>
<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#dom-datatransfer-effectallowed", "effectAllowed")}}</td>
<td>{{Spec2("HTML WHATWG")}}</td>
<td> </td>
</tr>
<tr>
<td>{{SpecName("HTML5.1", "editing.html#dom-datatransfer-effectallowed", "effectAllowed")}}</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>3.5</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>{{CompatUnknown}}</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("/en-US/docs/Web/API/DataTransfer", "See also")}}</p>
|
