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
|
---
title: DataTransfer.setData()
slug: Web/API/DataTransfer/setData
tags:
- drag and drop
translation_of: Web/API/DataTransfer/setData
---
<div>{{APIRef("HTML Drag and Drop API")}}</div>
<p><strong><code>DataTransfer.setData()</code></strong> 方法用来设置拖放操作的{{domxref("DataTransfer","drag data")}}到指定的数据和类型。</p>
<p>如果给定类型的数据不存在，则将其添加到拖动数据存储的末尾，使得 {{domxref("DataTransfer.types","types")}} 列表中的最后一个项目将是新类型。</p>
<p>如果给定类型的数据已经存在，现有数据将被替换为相同的位置。也就是说，替换相同类型的数据时 {{domxref("DataTransfer.types","types")}}列表的顺序不会更改。</p>
<p>示例数据类型为："<code>text/plain</code>" 和 "<code>text/uri-list</code>".</p>
<h2 id="语法">语法</h2>
<pre class="syntaxbox">void <var>dataTransfer</var>.setData(format, data);
</pre>
<h3 id="参数">参数</h3>
<dl>
<dt><em>format</em></dt>
<dd>一个{{domxref("DOMString")}} 表示要添加到 {{domxref("DataTransfer","drag object")}}的拖动数据的类型。</dd>
<dt><em>data</em></dt>
<dd>一个 {{domxref("DOMString")}}表示要添加到 {{domxref("DataTransfer","drag object")}}的数据。</dd>
</dl>
<h3 id="返回值">返回值</h3>
<dl>
<dt>void</dt>
</dl>
<h2 id="示例">示例</h2>
<p> </p>
<p>此示例显示了使用 {{domxref("DataTransfer")}} 对象的 {{domxref("DataTransfer.getData","getData()")}}, {{domxref("DataTransfer.setData","setData()")}} }和{{domxref("DataTransfer.clearData","clearData()")}} 方法。</p>
<pre class="brush: html"><!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>DataTransfer.setData()/.getData()/.clearData()</title>
<style>
div {
margin: 0em;
padding: 2em;
}
#source {
color: blue;
border: 1px solid black;
}
#target {
border: 1px solid black;
}
</style>
</head>
<body>
<section>
<h1>
<code>DataTransfer.setData()</code> <br>
<code>DataTransfer.getData()</code> <br>
<code>DataTransfer.clearData()</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>
</section>
<!-- js -->
<script>
function dragstart_handler(ev) {
console.log("dragStart");
// Change the source element's background color to signify drag has started
ev.currentTarget.style.border = "dashed";
// Set the drag's format and data. Use the event target's id for the data
ev.dataTransfer.setData("text/plain", ev.target.id);
}
function dragover_handler(ev) {
console.log("dragOver");
// prevent Default event
ev.preventDefault();
}
function drop_handler(ev) {
console.log("Drop");
ev.preventDefault();
// Get the data, which is the id of the drop target
var data = ev.dataTransfer.getData("text");
// appendChild
ev.target.appendChild(document.getElementById(data));
// Clear the drag data cache (for all formats/types)
ev.dataTransfer.clearData();
}
</script>
</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-setdata", "setData()")}}</td>
<td>{{Spec2("HTML WHATWG")}}</td>
<td> </td>
</tr>
<tr>
<td>{{SpecName("HTML5.1", "editing.html#dom-datatransfer-setdata", "setData()")}}</td>
<td>{{Spec2("HTML5.1")}}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
{{Compat("api.DataTransfer.setData")}}
<h2 id="也可以看看">也可以看看</h2>
<p>{{page("/en-US/docs/Web/API/DataTransfer", "See also")}}</p>
|
