blob: 29550800b6e878a9705081c7cc32380cb178247e (
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
190
191
192
193
|
---
title: DataTransfer.setDragImage()
slug: Web/API/DataTransfer/setDragImage
translation_of: Web/API/DataTransfer/setDragImage
---
<div>{{APIRef("HTML Drag and Drop API")}}</div>
<div></div>
<p>发生拖动时，从拖动目标({{event("dragstart")}}事件触发的元素)生成半透明图像，并在拖动过程中跟随鼠标指针。这个图片是自动创建的，你不需要自己去创建它。然而，如果想要设置为自定义图像，那么 <strong><code>DataTransfer.setDragImage()</code></strong> 方法就能派上用场。</p>
<p>图像通常是一个 {{HTMLElement("image")}} 元素，但也可以是{{HTMLElement("canvas")}} 或任何其他图像元素。该方法的x和y坐标是图像应该相对于鼠标指针出现的偏移量。</p>
<p>坐标指定鼠标指针相对于图片的偏移量。例如，要使图像居中，请使用图像宽度和高度的一半。</p>
<p>通常在 {{event("dragstart")}} 事件处理程序中调用此方法。</p>
<h2 id="Syntax" name="Syntax">语法</h2>
<pre class="syntaxbox notranslate">void <em>dataTransfer</em>.setDragImage(img, xOffset, yOffset);
</pre>
<h3 id="参数"> 参数</h3>
<dl>
<dt><em>img | </em>Element</dt>
<dd>用于拖曳反馈图像的图像 {{domxref("Element")}} 元素。</dd>
</dl>
<p> 如果Element是一个img元素，则将拖动位图设置为该元素的图像（保持大小）；否则，将拖动数位图设置为从给定元素所生成的图片（<a href="https://html.spec.whatwg.org/multipage/dnd.html#the-datatransfer-interface">当前尚未指定执行此操作的确切机制</a>）</p>
<dl>
<dt><em>xOffset</em></dt>
<dd>使用 <code>long</code> 指示相对于图片的横向偏移量</dd>
<dt><em>yOffset</em></dt>
<dd>使用 <code>long</code> 指示相对于图片的纵向偏移量
</dd>
</dl>
<h3 id="Return_Value" name="Return_Value">返回值</h3>
<dl>
<dt>void</dt>
<dd></dd>
</dl>
<h2 id="举个例子">举个例子</h2>
<p> 这个例子展示如何使用 <code>setDragImage()</code> 方法。请注意，此例子引用了命名为 <code>example.gif</code> 的图片文件。如果此文件存在，它将被用作拖动图像，如果此文件不存在，浏览器会使用其默认的拖动图像。</p>
<pre class="brush: js notranslate"><!DOCTYPE html>
<html lang=en>
<title>Example of DataTransfer.setDragImage()</title>
<meta name="viewport" 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");
// 设置拖动的格式和数据。使用事件目标的id作为数据
ev.dataTransfer.setData("text/plain", ev.target.id);
// 创建一个图像并且使用它作为拖动图像
// 请注意： 改变 "example.gif" 为一个已经存在的图片
// 或者，一个还没有创建出来的图片，那么浏览器将会使用默认的拖动图片
// 译者注：默认的拖动图片与拖动对象没有联系。一般是一个小型文件图标
var img = new Image();
img.src = 'example.gif';
ev.dataTransfer.setDragImage(img, 10, 10);
}
function dragover_handler(ev) {
console.log("dragOver");
ev.preventDefault();
}
function drop_handler(ev) {
console.log("Drop");
ev.preventDefault();
// 获取拖放目标的id数据
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
<body>
<h1>Example of <code>DataTransfer.setDragImage()</code></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-setdragimage','setDragImage()')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('HTML5.1', 'editing.html#dom-datatransfer-setdragimage','setDragImage()')}}</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>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari (WebKit)</th>
</tr>
<tr>
<td>Basic support</td>
<td>4</td>
<td>3.5</td>
<td>{{CompatNo}}</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>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>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatIE("10")}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
</tr>
</tbody>
</table>
</div>
<h2 id="See_also" name="See_also">参考链接</h2>
<p>{{page("/en-US/docs/Web/API/DataTransfer", "See also")}}</p>
<div id="gtx-trans" style="position: absolute; left: 543px; top: 687px;">
<div class="gtx-trans-icon"></div>
</div>
|
