From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/api/datatransfer/getdata/index.html | 165 +++++++++++++++++++++++ 1 file changed, 165 insertions(+) create mode 100644 files/ja/web/api/datatransfer/getdata/index.html (limited to 'files/ja/web/api/datatransfer/getdata') diff --git a/files/ja/web/api/datatransfer/getdata/index.html b/files/ja/web/api/datatransfer/getdata/index.html new file mode 100644 index 0000000000..23269b110b --- /dev/null +++ b/files/ja/web/api/datatransfer/getdata/index.html @@ -0,0 +1,165 @@ +--- +title: DataTransfer.getData() +slug: Web/API/DataTransfer/getData +tags: + - API + - HTML DOM + - Method + - Reference + - drag and drop +translation_of: Web/API/DataTransfer/getData +--- +
{{APIRef("HTML Drag and Drop API")}}
+ +

DataTransfer.getData() メソッドは、指定した型のドラッグデータを ({{domxref("DOMString")}} として) 受け取ります。ドラッグ操作がデータを含まない場合、このメソッドは空文字列を返します。

+ +

データ型は、例えば text/plain や text/uri-list です。

+ +

構文

+ +
DOMString dataTransfer.getData(format);
+
+ +

引数

+ +
+
format
+
受け取るデータの型を表す {{domxref("DOMString")}}。
+
+ +

戻り値

+ +
+
{{domxref("DOMString")}}
+
指定した format のドラッグデータを表す {{domxref("DOMString")}}。ドラッグ操作がデータを持たないか、指定した format のデータを持たない場合、このメソッドは空文字列を返します。
+
+ +

例

+ +

この例は、{{domxref("DataTransfer")}} オブジェクトの {{domxref("DataTransfer.getData","getData()")}} メソッドおよび {{domxref("DataTransfer.setData","setData()")}} メソッドの使い方を紹介します。

+ +

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>
+
+ +

CSS コンテンツ

+ +
#div1, #div2 {
+    width:100px;
+    height:50px;
+    padding:10px;
+    border:1px solid #aaaaaa;
+}
+
+ +

JavaScript コンテンツ

+ +
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';
+}
+
+ +

実行結果

+ +

{{ EmbedLiveSample('Example', 600, '', '', 'Web/API/DataTransfer/getData') }}

+ +

仕様

+ + + + + + + + + + + + + + + + + + + +
仕様書策定状況備考
{{SpecName("HTML WHATWG", "interaction.html#dom-datatransfer-getdata", "getData()")}}{{Spec2("HTML WHATWG")}} 
{{SpecName("HTML5.1", "editing.html#dom-datatransfer-getdata", "getData()")}}{{Spec2("HTML5.1")}}初期定義
+ +

ブラウザ実装状況

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
機能ChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
基本サポート43.5 [1]{{CompatGeckoDesktop(10)}}123.1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
機能AndroidAndroid WebviewChrome for AndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari Mobile
基本サポート{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile(10)}}[1]{{CompatNo}}{{CompatIE("10")}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] Firefox 48 より前のバージョンで MIME タイプがホワイトリストに存在しない場合、このメソッドは常に空リストを返します。

+ +

関連情報

+ +

{{page("/docs/Web/API/DataTransfer", "See_also")}}

-- cgit v1.2.3-54-g00ecf