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
|
---
title: DataTransfer.getData()
slug: Web/API/DataTransfer/getData
tags:
- API
- HTML DOM
- Method
- Reference
- drag and drop
translation_of: Web/API/DataTransfer/getData
---
<div>{{APIRef("HTML Drag and Drop API")}}</div>
<p><strong><code>DataTransfer.getData()</code></strong> メソッドは、指定した型のドラッグデータを ({{domxref("DOMString")}} として) 受け取ります。ドラッグ操作がデータを含まない場合、このメソッドは空文字列を返します。</p>
<p>データ型は、例えば <code>text/plain</code> や <code>text/uri-list</code> です。</p>
<h2 id="Syntax" name="Syntax">構文</h2>
<pre class="syntaxbox">DOMString <var>dataTransfer</var>.getData(format);
</pre>
<h3 id="Arguments" name="Arguments">引数</h3>
<dl>
<dt><em>format</em></dt>
<dd>受け取るデータの型を表す {{domxref("DOMString")}}。</dd>
</dl>
<h3 id="Return_value" name="Return_value">戻り値</h3>
<dl>
<dt>{{domxref("DOMString")}}</dt>
<dd>指定した <code>format</code> のドラッグデータを表す {{domxref("DOMString")}}。ドラッグ操作がデータを持たないか、指定した <code>format</code> のデータを持たない場合、このメソッドは空文字列を返します。</dd>
</dl>
<h2 id="Example" name="Example">例</h2>
<p>この例は、{{domxref("DataTransfer")}} オブジェクトの {{domxref("DataTransfer.getData","getData()")}} メソッドおよび {{domxref("DataTransfer.setData","setData()")}} メソッドの使い方を紹介します。</p>
<h3 id="HTML_Content" name="HTML_Content">HTML コンテンツ</h3>
<pre class="brush: html"><div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<span id="drag" draggable="true" ondragstart="drag(event)">drag me to the other box</span>
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</pre>
<h3 id="CSS_Content" name="CSS_Content">CSS コンテンツ</h3>
<pre class="brush: css">#div1, #div2 {
width:100px;
height:50px;
padding:10px;
border:1px solid #aaaaaa;
}
</pre>
<h3 id="JavaScript_Content" name="JavaScript_Content">JavaScript コンテンツ</h3>
<pre class="brush: js">function allowDrop(allowdropevent) {
allowdropevent.target.style.color = 'blue';
allowdropevent.preventDefault();
}
function drag(dragevent) {
dragevent.dataTransfer.setData("text", dragevent.target.id);
dragevent.target.style.color = 'green';
}
function drop(dropevent) {
dropevent.preventDefault();
var data = dropevent.dataTransfer.getData("text");
dropevent.target.appendChild(document.getElementById(data));
document.getElementById("drag").style.color = 'black';
}
</pre>
<h3 id="Result" name="Result">実行結果</h3>
<p id="EmbedLiveSample('Example'_''_''_''_'WebAPIDataTransfergetData')">{{ EmbedLiveSample('Example', 600, '', '', 'Web/API/DataTransfer/getData') }}</p>
<h2 id="Specifications" name="Specifications">仕様</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">仕様書</th>
<th scope="col">策定状況</th>
<th scope="col">備考</th>
</tr>
<tr>
<td>{{SpecName("HTML WHATWG", "interaction.html#dom-datatransfer-getdata", "getData()")}}</td>
<td>{{Spec2("HTML WHATWG")}}</td>
<td> </td>
</tr>
<tr>
<td>{{SpecName("HTML5.1", "editing.html#dom-datatransfer-getdata", "getData()")}}</td>
<td>{{Spec2("HTML5.1")}}</td>
<td>初期定義</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザ実装状況</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>機能</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari (WebKit)</th>
</tr>
<tr>
<td>基本サポート</td>
<td>4</td>
<td>3.5 [1]</td>
<td>{{CompatGeckoDesktop(10)}}</td>
<td>12</td>
<td>3.1</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>機能</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>基本サポート</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatGeckoMobile(10)}}[1]</td>
<td>{{CompatNo}}</td>
<td>{{CompatIE("10")}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
</tr>
</tbody>
</table>
</div>
<p>[1] Firefox 48 より前のバージョンで MIME タイプがホワイトリストに存在しない場合、このメソッドは常に空リストを返します。</p>
<h2 id="See_also" name="See_also">関連情報</h2>
<p>{{page("/docs/Web/API/DataTransfer", "See_also")}}</p>
|
