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/cleardata/index.html | 189 +++++++++++++++++++++ .../web/api/datatransfer/datatransfer/index.html | 48 ++++++ .../ja/web/api/datatransfer/dropeffect/index.html | 137 +++++++++++++++ .../web/api/datatransfer/effectallowed/index.html | 140 +++++++++++++++ files/ja/web/api/datatransfer/files/index.html | 62 +++++++ files/ja/web/api/datatransfer/getdata/index.html | 165 ++++++++++++++++++ files/ja/web/api/datatransfer/index.html | 151 ++++++++++++++++ files/ja/web/api/datatransfer/items/index.html | 119 +++++++++++++ files/ja/web/api/datatransfer/setdata/index.html | 174 +++++++++++++++++++ .../web/api/datatransfer/setdragimage/index.html | 137 +++++++++++++++ files/ja/web/api/datatransfer/types/index.html | 121 +++++++++++++ 11 files changed, 1443 insertions(+) create mode 100644 files/ja/web/api/datatransfer/cleardata/index.html create mode 100644 files/ja/web/api/datatransfer/datatransfer/index.html create mode 100644 files/ja/web/api/datatransfer/dropeffect/index.html create mode 100644 files/ja/web/api/datatransfer/effectallowed/index.html create mode 100644 files/ja/web/api/datatransfer/files/index.html create mode 100644 files/ja/web/api/datatransfer/getdata/index.html create mode 100644 files/ja/web/api/datatransfer/index.html create mode 100644 files/ja/web/api/datatransfer/items/index.html create mode 100644 files/ja/web/api/datatransfer/setdata/index.html create mode 100644 files/ja/web/api/datatransfer/setdragimage/index.html create mode 100644 files/ja/web/api/datatransfer/types/index.html (limited to 'files/ja/web/api/datatransfer') diff --git a/files/ja/web/api/datatransfer/cleardata/index.html b/files/ja/web/api/datatransfer/cleardata/index.html new file mode 100644 index 0000000000..a8a500abd1 --- /dev/null +++ b/files/ja/web/api/datatransfer/cleardata/index.html @@ -0,0 +1,189 @@ +--- +title: DataTransfer.clearData() +slug: Web/API/DataTransfer/clearData +tags: + - API + - DataTransfer + - HTML DOM + - Method + - Reference + - clearData + - drag and drop +translation_of: Web/API/DataTransfer/clearData +--- +
{{APIRef("HTML Drag and Drop API")}}
+ +

DataTransfer.clearData() メソッドは、指定されたタイプのドラッグ操作の {{domxref("DataTransfer", "ドラッグデータ")}} を削除します。指定された型のデータが存在しない場合、このメソッドは何もしません。

+ +

このメソッドが引数なしで呼び出された場合、またはフォーマットが空の {{domxref("DOMString", "string")}} であった場合、すべての型のデータが削除されます。

+ +

このメソッドはドラッグ操作からファイルを削除しないので、ドラッグに含まれるファイルがある場合、オブジェクトの {{domxref("DataTransfer.types")}} リストに "Files" タイプのエントリが残る可能性があります。

+ +
+

このメソッドは、{{event("dragstart")}} イベントのハンドラでのみ使用できます。なぜなら、ドラッグ操作のデータストアが書き込み可能なのはその時だけだからです。

+
+ +

シンタックス

+ +
DataTransfer.clearData([format]);
+
+ +

パラメータ

+ +
+
format {{optional_inline}}
+
削除するデータの型を指定する {{domxref("DOMString", "文字列")}}。このパラメータが空の文字列であったり、指定されていない場合は、すべての型のデータが削除されます。
+
+ +

Example

+ +

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

+ +

HTML

+ +
<span class="tweaked" id="source" draggable="true">
+  この要素を選択し、ドロップゾーンにドラッグしてから選択を解除して要素を移動します。
+</span>
+<span class="tweaked" id="target">ドロップゾーン</span>
+<div>ステータス: <span id="status">ドラッグして開始</span></div>
+<div>データ: <span id="data">未初期化</span></div>
+
+ +

CSS

+ +
span.tweaked {
+  display: inline-block;
+  margin: 1em 0;
+  padding: 1em 2em;
+}
+
+#source {
+  color: blue;
+  border: 1px solid black;
+}
+
+#target {
+  border: 1px solid black;
+}
+
+ +

JavaScript

+ +
window.addEventListener('DOMContentLoaded', function () {
+  // HTML要素を選択する
+  var draggable = document.getElementById('source');
+  var dropable = document.getElementById('target');
+  var status = document.getElementById('status');
+  var data = document.getElementById('data');
+  var dropped = false;
+
+  // イベントハンドラを登録する
+  draggable.addEventListener('dragstart', dragStartHandler);
+  draggable.addEventListener('dragend', dragEndHandler);
+  dropable.addEventListener('dragover', dragOverHandler);
+  dropable.addEventListener('dragleave', dragLeaveHandler);
+  dropable.addEventListener('drop', dropHandler);
+
+  function dragStartHandler (event) {
+    status.innerHTML = 'ドラッグ中';
+
+    // ドラッグが開始されたことを示すように、ターゲット要素の境界線を変更する
+    event.currentTarget.style.border = '1px dashed blue';
+
+    // 既存のクリップボードをクリアすることから始めます。
+    // 特定のタイプを指定していないので、これはすべてのタイプに影響します。
+
+    event.dataTransfer.clearData();
+
+    // ドラッグのフォーマットとデータを設定します(データはイベントターゲットのIDを使用)
+    event.dataTransfer.setData('text/plain', event.target.id);
+
+    data.innerHTML = event.dataTransfer.getData('text/plain');
+  }
+
+  function dragEndHandler (event) {
+    if (!dropped) {
+      status.innerHTML = 'ドラッグのキャンセル';
+    }
+
+    data.innerHTML = event.dataTransfer.getData('text/plain') || 'empty';
+
+    // ドラッグ中ではないことを示すために境界線を変更する
+    event.currentTarget.style.border = '1px solid black';
+
+    if (dropped) {
+      // すべてのイベントリスナーを削除
+      draggable.removeEventListener('dragstart', dragStartHandler);
+      draggable.removeEventListener('dragend', dragEndHandler);
+      dropable.removeEventListener('dragover', dragOverHandler);
+      dropable.removeEventListener('dragleave', dragLeaveHandler);
+      dropable.removeEventListener('drop', dropHandler);
+    }
+  }
+
+  function dragOverHandler (event) {
+    status.innerHTML = 'ドロップ可能';
+
+    event.preventDefault();
+  }
+
+  function dragLeaveHandler (event) {
+    status.innerHTML = 'ドラッグ中 (ドロップは可能)';
+
+    event.preventDefault();
+  }
+
+  function dropHandler (event) {
+    dropped = true;
+
+    status.innerHTML = 'ドロップしました。';
+
+    event.preventDefault();
+
+    // イベント形式に連動したデータを取得する « text »
+    var _data = event.dataTransfer.getData('text/plain');
+    var element = document.getElementById(_data);
+
+    // イベントのターゲット要素にドラッグソース要素を追加する
+    event.target.appendChild(element);
+
+    // CSSスタイルと表示テキストを変更する
+    element.style.cssText = 'border: 1px solid black;display: block; color: red';
+    element.innerHTML = "ドロップゾーンに入りました!";
+  }
+})
+
+ +

{{EmbedLiveSample('Example', 300, 250)}}

+ +

仕様

+ + + + + + + + + + + + + + + + + + + +
仕様書ステータスコメント
{{SpecName('HTML WHATWG', 'interaction.html#dom-datatransfer-cleardata','DataTransfer.clearData()')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5.1', 'editing.html#dom-datatransfer-cleardata','DataTransfer.clearData()')}}{{Spec2('HTML5.1')}}初期定義
+ +

ブラウザの互換性

+ + + +

{{Compat("api.DataTransfer.clearData")}}

+ +

あわせて参照

+ +

{{page("/ja/docs/Web/API/DataTransfer", "あわせて参照")}}

diff --git a/files/ja/web/api/datatransfer/datatransfer/index.html b/files/ja/web/api/datatransfer/datatransfer/index.html new file mode 100644 index 0000000000..ee919e1d40 --- /dev/null +++ b/files/ja/web/api/datatransfer/datatransfer/index.html @@ -0,0 +1,48 @@ +--- +title: DataTransfer() +slug: Web/API/DataTransfer/DataTransfer +tags: + - API + - Constructor + - DataTransfer + - HTML Drag and Drop API + - Reference + - drag and drop +translation_of: Web/API/DataTransfer/DataTransfer +--- +

{{APIRef("HTML Drag and Drop API")}}

+ +

DataTransfer のコンストラクタは、新しい {{domxref("DataTransfer")}} オブジェクトのインスタンスを作成します。

+ +

シンタックス

+ +
var dataTrans = new DataTransfer()
+ +

パラメータ

+ +

なし

+ +

仕様

+ + + + + + + + + + + + + + +
仕様書ステータスコメント
{{SpecName('HTML WHATWG','#dom-datatransfer','the DataTransfer() constructor')}}{{Spec2('HTML WHATWG')}}初期定義
+ +

ブラウザの互換性

+ +
+ + +

{{Compat("api.DataTransfer.DataTransfer")}}

+
diff --git a/files/ja/web/api/datatransfer/dropeffect/index.html b/files/ja/web/api/datatransfer/dropeffect/index.html new file mode 100644 index 0000000000..3bc159facb --- /dev/null +++ b/files/ja/web/api/datatransfer/dropeffect/index.html @@ -0,0 +1,137 @@ +--- +title: DataTransfer.dropEffect +slug: Web/API/DataTransfer/dropEffect +tags: + - API + - HTML DOM + - Property + - Reference + - drag and drop +translation_of: Web/API/DataTransfer/dropEffect +--- +
{{APIRef("HTML Drag and Drop API")}}
+ +

DataTransfer.dropEffect プロパティは、ドラッグ＆ドロップ操作中にユーザに与えられるフィードバック (通常は視覚的) を制御します。これは、ドラッグ中に表示されるカーソルに影響します。例えば、ユーザがターゲットのドロップ要素の上にカーソルを置くと、ブラウザのカーソルは、どのタイプの操作が発生するかを示すことができます。

+ +

{{domxref("DataTransfer")}} オブジェクトを作成すると、dropEffect には文字列の値が設定されます。取得時には、現在の値を返します。設定時、新しい値が以下の値のいずれかであれば、プロパティの現在の値が新しい値に設定され、それ以外の値は無視されます。

+ +

{{event("dragenter")}} と {{event("dragover")}} イベントでは、ユーザーがどのようなアクションを要求しているかに基づいて、dropEffect が初期化されます。これをどのように決定するかはプラットフォームによって異なりますが、通常、ユーザーは alt キーなどの修飾キーを押して、希望するアクションを調整することができます。{{event("dragenter")}} と {{event("dragover")}} イベントのイベントハンドラ内では、ユーザーが要求しているアクションとは異なるアクションが必要な場合、dropEffect を修正する必要があります。

+ +

{{event("drop")}} と {{event("dragend")}} イベントでは、dropEffect には希望するアクションが設定され、前回の {{event("dragenter")}} または {{event("dragover")}} イベントの後の値が dropEffect になります。例えば、{{event("dragend")}} イベントで、希望する dropEffect が  "move" であれば、ドラッグされているデータはソースから削除されるべきです。

+ +

シンタックス

+ +
dataTransfer.dropEffect;
+
+ +

値

+ +

ドラッグ操作の効果を表す {{domxref("DOMString")}}。可能な値は以下の通りです。

+ +
+
copy
+
新しい場所にソースアイテムのコピーが作成されます。
+
move
+
アイテムを新しい場所に移動します。
+
link
+
新しい場所のソースにリンクが確立されます。
+
none
+
アイテムはドロップしない場合があります。
+
+ +

dropEffect に他の値を代入しても効果はなく、古い値が保持されます。

+ +

Example

+ +

この例では、dropEffect と{{domxref("DataTransfer.effectAllowed", "effectAllowed")}} プロパティを使用しています。

+ +

HTML コンテンツ

+ +
<div>
+  <p id="source" ondragstart="dragstart_handler(event);" draggable="true">
+    この要素を選択し、ドロップゾーンにドラッグしてから選択を解除して要素を移動します。
+  </p>
+</div>
+<div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">ドロップゾーン</div>
+
+ +

CSS コンテンツ

+ +
div {
+  margin: 0em;
+  padding: 2em;
+}
+
+#source {
+  color: blue;
+  border: 1px solid black;
+}
+
+#target {
+  border: 1px solid black;
+}
+
+ +

JavaScript コンテンツ

+ +
function dragstart_handler(ev) {
+  console.log("dragStart: dropEffect = " + ev.dataTransfer.dropEffect + " ; effectAllowed = " + ev.dataTransfer.effectAllowed);
+
+  // この要素の id をドラッグ ペイロードに追加し、ドロップ ハンドラが
+  // どの要素をツリーに追加するかを知ることができるようにします。
+  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();
+
+  // ターゲットの ID を取得し、移動した要素をターゲットの DOM に追加します。
+  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 を移動するように設定します。
+  ev.dataTransfer.dropEffect = "move"
+}
+
+ +

{{EmbedLiveSample('Example', 300, 250)}}

+ +

仕様

+ + + + + + + + + + + + + + + + + + + + + +
仕様書ステータスコメント
{{SpecName('HTML WHATWG', 'interaction.html#dom-datatransfer-dropeffect','dropEffect')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5.1', 'editing.html#dom-datatransfer-dropeffect','dropEffect')}}{{Spec2('HTML5.1')}}初期定義
+ +

ブラウザの互換性

+ + + +

{{Compat("api.DataTransfer.dropEffect")}}

+ +

あわせて参照

+ +

{{page("/ja/docs/Web/API/DataTransfer", "あわせて参照")}}

diff --git a/files/ja/web/api/datatransfer/effectallowed/index.html b/files/ja/web/api/datatransfer/effectallowed/index.html new file mode 100644 index 0000000000..ed9dfaea44 --- /dev/null +++ b/files/ja/web/api/datatransfer/effectallowed/index.html @@ -0,0 +1,140 @@ +--- +title: DataTransfer.effectAllowed +slug: Web/API/DataTransfer/effectAllowed +tags: + - API + - HTML DOM + - Property + - Reference + - drag and drop +translation_of: Web/API/DataTransfer/effectAllowed +--- +
{{APIRef("HTML Drag and Drop API")}}
+ +

DataTransfer.effectAllowed プロパティは、ドラッグ操作で許可される effect を指定します。コピー操作は、ドラッグされるデータが現在の位置からドロップ位置にコピーされることを示すために使用されます。移動操作は、ドラッグされるデータが移動されることを示すために使用され、リンク操作は、ソース・ロケーションとドロップ・ロケーションの間に何らかの形の関係または接続が作成されることを示すために使用されます。

+ +

このプロパティは、{{event("dragstart")}} イベントで設定して、ドラッグソースのドラッグ効果を設定する必要があります。イベントハンドラ {{event("dragenter")}} および{{event("dragover")}} 内では、このプロパティは {{event("dragstart")}} イベントで割り当てられた値に設定されるため、どの効果が許可されているかを決定するために effectAllowed を使用することができます。

+ +

イベント {{event("dragstart")}} 以外のイベントで effectAllowed に値を代入しても何の効果もありません。

+ +

シンタックス

+ +
dataTransfer.effectAllowed;
+
+ +

値

+ +

許可されているドラッグ操作を表す {{domxref("DOMString")}}。可能な値は以下の通りです。

+ +
+
none
+
アイテムはドロップしない場合があります。
+
copy
+
ソースアイテムのコピーは、新しい場所で作成することができます。
+
copyLink
+
コピーやリンク操作は許可されています。
+
copyMove
+
コピーや移動の操作は許可されています。
+
link
+
新しい場所のソースへのリンクが確立されている場合があります。
+
linkMove
+
リンクや移動の操作は許可されています。
+
move
+
アイテムは新しい場所に移動することができます。
+
all
+
すべての操作が許可されています。
+
uninitialized
+
effect が設定されていない場合のデフォルト値で、全ての effect に相当します。
+
+ +

effectAllowed に他の値を代入しても効果はなく、古い値が保持されます。

+ +

Internet Explorer では、値を小文字に変更するので、linkMove は linkmove になります。

+ +

例

+ +

この例では、effectAllowed プロパティと {{domxref("DataTransfer.dropEffect", "dropEffect")}} プロパティを使用しています。

+ +
<!DOCTYPE html>
+<html lang=ja>
+<title>DataTransfer.{dropEffect,effectAllowed} プロパティの例</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);
+ // この要素の id を drag ペイロードに追加し、
+ // drop ハンドラがどの要素をツリーに追加するかを知ることができるようにします。
+ 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();
+ // ターゲットの ID を取得し、移動した要素をターゲットの DOM に追加します。
+ 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 を移動するように設定します。
+ ev.dataTransfer.dropEffect = "move"
+}
+</script>
+<body>
+<h1><code>DataTransfer</code>.{<code>dropEffect</code>, <code>effectAllowed</code>} プロパティの例</h1>
+ <div>
+   <p id="source" ondragstart="dragstart_handler(event);" draggable="true">
+     この要素を選択し、ドロップゾーンにドラッグしてから選択を解除して要素を移動します。</p>
+ </div>
+ <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">ドロップゾーン</div>
+</body>
+</html>
+
+ +

仕様

+ + + + + + + + + + + + + + + + + + + +
仕様書ステータスコメント
{{SpecName("HTML WHATWG", "interaction.html#dom-datatransfer-effectallowed", "effectAllowed")}}{{Spec2("HTML WHATWG")}}
{{SpecName("HTML5.1", "editing.html#dom-datatransfer-effectallowed", "effectAllowed")}}{{Spec2("HTML5.1")}}初期定義
+ +

ブラウザの互換性

+ + + +

{{Compat("api.DataTransfer.effectAllowed")}}

+ +

あわせて参照

+ +

{{page("/ja/docs/Web/API/DataTransfer", "あわせて参照")}}

diff --git a/files/ja/web/api/datatransfer/files/index.html b/files/ja/web/api/datatransfer/files/index.html new file mode 100644 index 0000000000..9b46bb685d --- /dev/null +++ b/files/ja/web/api/datatransfer/files/index.html @@ -0,0 +1,62 @@ +--- +title: DataTransfer.files +slug: Web/API/DataTransfer/files +tags: + - API + - HTML DOM + - Property + - Reference + - drag and drop +translation_of: Web/API/DataTransfer/files +--- +
{{APIRef("HTML Drag and Drop API")}}
+ +

DataTransfer.files プロパティは、ドラッグ操作中の {{domxref("FileList", "ファイルのリスト")}} となります。操作にファイルが含まれていない場合、リストは空です。

+ +

この機能を利用して、ユーザーのデスクトップからブラウザにファイルをドラッグすることができます。

+ +

シンタックス

+ +
dataTransfer.files;
+
+ +

戻り値

+ +

ドラッグ操作のファイルの {{domxref("FileList", "list")}}。ドラッグ操作にファイルがない場合、リストは空です。

+ +

例

+ +

このインターフェイスの実例は2つあります。

+ + + +

仕様

+ + + + + + + + + + + + + + + + + + + +
仕様書ステータスコメント
{{SpecName("HTML WHATWG", "interaction.html#dom-datatransfer-files", "files")}}{{Spec2("HTML WHATWG")}}
{{SpecName("HTML5.1", "editing.html#dom-datatransfer-files", "files")}}{{Spec2("HTML5.1")}}初期定義
+ +

ブラウザの互換性

+ + + +

{{Compat("api.DataTransfer.files")}}

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")}}

diff --git a/files/ja/web/api/datatransfer/index.html b/files/ja/web/api/datatransfer/index.html new file mode 100644 index 0000000000..1430b904fe --- /dev/null +++ b/files/ja/web/api/datatransfer/index.html @@ -0,0 +1,151 @@ +--- +title: DataTransfer +slug: Web/API/DataTransfer +tags: + - API + - DataTransfer + - HTML Drag and Drop API + - Interface + - NeedsMarkupWork + - Reference + - Web Development + - drag and drop +translation_of: Web/API/DataTransfer +--- +
{{APIRef("HTML Drag and Drop API")}}
+ +

DataTransfer オブジェクトは、ドラッグ＆ドロップ操作中にドラッグされているデータを保持するために使用されます。これは、1 つ以上のデータ項目を保持することができ、それぞれが 1 つ以上のデータ型を持ちます。ドラッグ＆ドロップの詳細については、HTML ドラッグ＆ドロップ API を参照してください。

+ +

このオブジェクトはすべての {{domxref("DragEvent","ドラッグイベント")}} の {{domxref("DragEvent.dataTransfer","dataTransfer")}} プロパティからアクセスすることができます。

+ +

コンストラクタ

+ +
+
{{domxref("DataTransfer.DataTransfer","DataTransfer()")}}
+
新規 DataTransfer オブジェクトを作成して返す。
+
+ +

プロパティ一覧

+ +

標準プロパティ

+ +
+
{{domxref("DataTransfer.dropEffect")}}
+
現在選択されているドラッグ&ドロップ操作の種類を取得したり、新しい操作の種類をセットしたりします。値は none, copy, link, move のいずれかです。
+
{{domxref("DataTransfer.effectAllowed")}}
+
とりうるすべての操作の種類を与えます。none, copy, copyLink, copyMove, link, linkMove, move, all, uninitialized のいずれかです。
+
+ +
+
{{domxref("DataTransfer.files")}}
+
データトランスファーが保持していて利用可能なすべてのローカルファイルのリストを保持します。ドラッグ操作がファイルのドラッグによるものではない場合、このプロパティは空のリストになります。
+
{{domxref("DataTransfer.items")}} {{readonlyInline}}
+
 全てのドラッグデータのリストである {{domxref("DataTransferItemList")}} オブジェクトを返します。.
+
{{domxref("DataTransfer.types")}} {{readonlyInline}}
+
{{event("dragstart")}} イベントでセットされたフォーマットを示す{{domxref("DOMString","strings")}}の配列。
+
+ +

Gecko プロパティ

+ +

{{SeeCompatTable}}

+ +
注: この節の全プロパティは Gecko-固有のものです。
+ +
+
{{domxref("DataTransfer.mozCursor")}}
+
ドラッグカーソルの状態を返します。主にタブドラッグの際のカーソルを制御するのに使います。
+
{{domxref("DataTransfer.mozSourceNode")}} {{readonlyInline}}
+
ドラッグ操作を開始するためにボタンを押下したときにマウスカーソルのあった{{ domxref("Node") }}を返します。外部アプリケーションからのドラッグの場合や、ドラッグを開始したノードが呼び出し元からアクセスできない物であった場合は、値は null となります。
+
{{domxref("DataTransfer.mozUserCancelled")}} {{readonlyInline}}
+
このプロパティは dragend イベントに対してのみ適用され、ユーザーが Esc キーを押下してドラッグ操作を取り消した場合は値が true となります。不正な場所でドロップした場合など、その他の理由でドラッグ操作に失敗した場合には、値は false となります。
+
+ +

Deprecated プロパティ

+ +
+
{{domxref("DataTransfer.mozItemCount")}} {{readonlyInline}} {{deprecated_inline}}
+
ドラッグされている項目の個数を返します。Firefox 71 で削除されます。
+
+ +

メソッド

+ +

標準メソッド

+ +
+
{{domxref("DataTransfer.clearData()")}}
+
指定された型のデータを削除します。型の指定は省略可能です。型として空の文字列を指定した場合、もしくは型を指定しなかった場合、すべての型のデータが削除されます。指定された型のデータが存在しない場合、またはデータトランスファーが何もデータを持っていない場合、このメソッドは何もしません。
+
{{domxref("DataTransfer.getData()")}}
+
指定された型のデータを取得します。指定された型のデータが存在しない場合、またはデータトランスファーが何もデータを保持していない場合、空文字を返します。
+
{{domxref("DataTransfer.setData()")}}
+
指定された型のデータを設定します。その型のデータが存在しない場合、データはリストの最後に追加されるため、データ型のリストの最後の項目は、最後に追加された新しいデータ型となります。その型のデータがすでに存在している場合、データ型のリストにおける元と同じ位置で、古いデータが新しいデータと置き換わります。
+
{{domxref("DataTransfer.setDragImage()")}}
+
ドラッグ中に表示されるフィードバックイメージについて、独自のものを使用したい場合に、それをセットします。
+
+ +

Gecko メソッド

+ +

{{Non-standard_header()}}

+ +
注: この節の全メソッドは Gecko-固有のものです。
+ +
+
{{domxref("DataTransfer.addElement()")}}
+
ドラッグ元の要素を指定します。
+
+ +

Deprecated メソッド

+ +
+
{{domxref("DataTransfer.mozClearDataAt()")}} {{deprecated_inline}}
+
指定されたインデックスの項目について、指定された形式に関連付けられたデータを削除します。インデックスは 0〜(項目の数-1）の範囲です。Firefox 71 で削除されます。
+
{{domxref("DataTransfer.mozGetDataAt()")}} {{deprecated_inline}}
+
指定されたインデックスの項目の、指定された形式のデータを取得します。存在しない項目またはデータ形式を指定した場合は null を返します。インデックスは 0〜(項目の数-1）の範囲です。Firefox 71 で削除されます。
+
{{domxref("DataTransfer.mozSetDataAt()")}} {{deprecated_inline}}
+
データトランスファーは複数の項目を保持する事ができ、それぞれの項目には 0 から始まるインデックスが付けられます。mozSetDataAt() は、すでに存在する項目を変更する場合には mozItemCount より小さい値をインデックスとして指定し、新しい項目を追加する場合は mozItemCount に等しい値をインデックスとして指定します。また、mozItemCount は項目を追加する度に増加します。Firefox 71 で削除されます。
+
{{domxref("DataTransfer.mozTypesAt()")}} {{deprecated_inline}}
+
指定されたインデックスの項目が保持しているデータの形式のリスト（文字列の配列）を返します。0〜(項目の数-1）の範囲外のインデックスを指定した場合は、空のリストを返します。Firefox 71 で削除されます。
+
+ +

例

+ +

この文書に載っているすべてのメソッドとプロパティは自分自身のリファレンスページを持ち、そのページに直接例が載っているか、例へのリンクがあるかのいずれかです。

+ +

仕様

+ + + + + + + + + + + + + + + + + + + + + +
仕様書策定状況コメント
{{SpecName('HTML WHATWG', 'interaction.html#datatransfer','DataTransfer')}}{{Spec2('HTML WHATWG')}}mozCursor, mozItemCount, mozSourceNode, mozUserCancelled, addElement(), mozClearDataAt(), mozGetDataAt(), mozSetDataAt() and mozTypesAt are Gecko specific.
{{SpecName('HTML5.1', 'editing.html#the-datatransfer-interface','DataTransfer')}}{{Spec2('HTML5.1')}}Not included in W3C HTML5 {{Spec2('HTML5 W3C')}}
+ +

ブラウザー実装状況

+ + + +

{{Compat("api.DataTransfer")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/datatransfer/items/index.html b/files/ja/web/api/datatransfer/items/index.html new file mode 100644 index 0000000000..e37ce35154 --- /dev/null +++ b/files/ja/web/api/datatransfer/items/index.html @@ -0,0 +1,119 @@ +--- +title: DataTransfer.items +slug: Web/API/DataTransfer/items +tags: + - API + - HTML DOM + - Property + - Reference + - drag and drop +translation_of: Web/API/DataTransfer/items +--- +
{{APIRef("HTML Drag and Drop API")}}
+ +

読み取り専用の {{domxref("DataTransfer")}} プロパティの items プロパティは、ドラッグ操作での {{domxref("DataTransferItemList", "list")}} の {{domxref("DataTransferItem", "DataTransfer items")}} です。リストには操作中の項目ごとに1つの項目が含まれており、操作中に項目がなかった場合はリストは空になります。

+ +

シンタックス

+ +
itemList = dataTransfer.items;
+
+ +

戻り値

+ +

ドラッグ操作でドラッグされる項目を表す {{domxref("DataTransferItem")}} オブジェクトを含む {{domxref("DataTransferItemList")}} オブジェクトで、ドラッグされるオブジェクトごとに1つのリスト項目があります。ドラッグ操作にデータがない場合、リストは空です。

+ +

例

+ +

この例では、items と{{domxref("DataTransfer.types", "types")}} プロパティを使用しています。

+ +
<!DOCTYPE html>
+<html lang=ja>
+<title>DataTransfer.{types,item}プロパティの例</title>
+<meta content="width=device-width">
+<style>
+  div {
+    margin: 0em;
+    padding: 2em;
+  }
+  #target {
+    border: 1px solid black;
+  }
+</style>
+<script>
+function dragstart_handler(ev) {
+ console.log("dragStart: target.id = " + ev.target.id);
+ // この要素の id をドラッグ ペイロードに追加し、
+ // drop ハンドラがどの要素をツリーに追加するかを知ることができるようにします。
+ ev.dataTransfer.setData("text/plain", ev.target.id);
+ ev.dataTransfer.effectAllowed = "move";
+}
+
+function drop_handler(ev) {
+ console.log("drop: target.id = " + ev.target.id);
+ ev.preventDefault();
+ // ターゲットの ID を取得し、移動した要素をターゲットの DOM に追加します。
+ var data = ev.dataTransfer.getData("text");
+ ev.target.appendChild(document.getElementById(data));
+ // 各フォーマットタイプをプリントする
+ if (ev.dataTransfer.types != null) {
+   for (var i=0; i < ev.dataTransfer.types.length; i++) {
+     console.log("... types[" + i + "] = " + ev.dataTransfer.types[i]);
+   }
+ }
+ // 各項目の "kind" と "type" をプリントする
+ if (ev.dataTransfer.items != null) {
+   for (var i=0; i < ev.dataTransfer.items.length; i++) {
+     console.log("... items[" + i + "].kind = " + ev.dataTransfer.items[i].kind + " ; type = " + ev.dataTransfer.items[i].type);
+   }
+ }
+}
+
+function dragover_handler(ev) {
+ console.log("dragOver");
+ ev.preventDefault();
+ // dropEffect を移動するように設定します。
+ ev.dataTransfer.dropEffect = "move"
+}
+</script>
+<body>
+<h1><code>DataTransfer</code>.{<code>types</code>, <code>items</code>} プロパティの例</h1>
+ <ul>
+   <li id="i1" ondragstart="dragstart_handler(event);" draggable="true">アイテム1をドロップゾーンにドラッグ</li>
+   <li id="i2" ondragstart="dragstart_handler(event);" draggable="true">アイテム2をドロップゾーンにドラッグ</li>
+ </ul>
+ <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">ドロップゾーン</div>
+</body>
+</html>
+
+ +

仕様

+ + + + + + + + + + + + + + + + + + + +
仕様書ステータスコメント
{{SpecName("HTML WHATWG", "interaction.html#dom-datatransfer-items", "items")}}{{Spec2("HTML WHATWG")}}
{{SpecName("HTML5.1", "editing.html#dom-datatransfer-items", "items")}}{{Spec2("HTML5.1")}}初期定義
+ +

ブラウザの互換性

+ + + +

{{Compat("api.DataTransfer.items")}}

+ +

あわせて参照

+ +

{{page("/ja/docs/Web/API/DataTransfer", "あわせて参照")}}

diff --git a/files/ja/web/api/datatransfer/setdata/index.html b/files/ja/web/api/datatransfer/setdata/index.html new file mode 100644 index 0000000000..6ed9667104 --- /dev/null +++ b/files/ja/web/api/datatransfer/setdata/index.html @@ -0,0 +1,174 @@ +--- +title: DataTransfer.setData() +slug: Web/API/DataTransfer/setData +tags: + - API + - HTML DOM + - Method + - Reference + - drag and drop +translation_of: Web/API/DataTransfer/setData +--- +
{{APIRef("HTML Drag and Drop API")}}
+ +

DataTransfer.setData() メソッドは、ドラッグ操作の {{domxref("DataTransfer","drag data")}} に指定したデータと型を設定します。与えられた型のデータが存在しない場合、このデータはドラッグデータストアの末尾に加えられ、このような {{domxref("DataTransfer.types","types")}} リストの最後のアイテムは新しい型になります。与えられた型のデータが存在する場合、既存のデータが同じ位置で置き換えられます。同じ型のデータが置き換えられる時、{{domxref("DataTransfer.types","types")}} リストの並び順は変更されません。

+ +

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

+ +

構文

+ +
void dataTransfer.setData(format, data);
+
+ +

引数

+ +
+
format
+
{{domxref("DataTransfer","drag object")}} に追加するドラッグデータの型を表す {{domxref("DOMString")}}。
+
data
+
{{domxref("DataTransfer","drag object")}} に追加するデータを表す {{domxref("DOMString")}}。
+
+ +

戻り値

+ +
+
無効。
+
+ +

例

+ +

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

+ +
<!DOCTYPE html>
+<html lang=en>
+<title>Examples of DataTransfer's setData(), getData(), and clearData()</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");
+ // 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");
+ 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");
+ ev.target.appendChild(document.getElementById(data));
+ // Clear the drag data cache (for all formats/types)
+ ev.dataTransfer.clearData();
+}
+</script>
+<body>
+<h1>Examples of <code>DataTransfer</code>: <code>setData()</code>, <code>getData()</code>, <code>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>
+</body>
+</html>
+
+ +

仕様

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

ブラウザ実装状況

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
機能ChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
基本サポート43.510123.1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
機能AndroidAndroid WebviewChrome for AndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari Mobile
基本サポート{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatIE("10")}}{{CompatNo}}{{CompatNo}}
+
+ +

関連情報

+ +

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

diff --git a/files/ja/web/api/datatransfer/setdragimage/index.html b/files/ja/web/api/datatransfer/setdragimage/index.html new file mode 100644 index 0000000000..d46965be0e --- /dev/null +++ b/files/ja/web/api/datatransfer/setdragimage/index.html @@ -0,0 +1,137 @@ +--- +title: DataTransfer.setDragImage() +slug: Web/API/DataTransfer/setDragImage +tags: + - API + - H5 DnD + - HTML DOM + - Method + - Reference + - drag and drop +translation_of: Web/API/DataTransfer/setDragImage +--- +
{{APIRef("HTML Drag and Drop API")}}
+ +

ドラッグが発生すると、ドラッグ対象 ({{event("dragstart")}} イベントが発生した要素) から半透明の画像が生成され、ドラッグ中にマウスポインタに沿って移動します。この画像は自動的に作成されるので、自分で作成する必要はありません。ただし、カスタム画像が必要な場合は、DataTransfer.setDragImage() メソッドを使用して、使用するカスタム画像を設定することができます。画像は通常、{{HTMLElement("image")}} 要素になりますが、{{HTMLElement("canvas")}} やその他の可視要素であっても構いません。

+ +

メソッドの x 座標と y 座標は、マウスポインタに対する画像の相対的な表示方法を定義します。これらの座標は、マウスカーソルがあるべき画像のオフセットを定義します。例えば、ポインタが中心に来るように画像を表示するには、画像の幅と高さの半分の値を使用します。

+ +

このメソッドは {{event("dragstart")}} イベントハンドラ内で呼び出す必要があります。

+ +

シンタックス

+ +
void dataTransfer.setDragImage(img | element, xOffset, yOffset);
+
+ +

引数

+ +
+
img | element
+
ドラッグフィードバック画像に使用する画像 {{domxref("Element")}} 要素。
+
もし {{domxref("Element")}} が img 要素であれば、ドラッグデータストアのビットマップをその要素の画像に設定します (その要素に固有のサイズで)。そうでなければ、ドラッグデータストアのビットマップを、与えられた要素から生成された画像に設定します (そのための正確なメカニズムは現在のところ指定されていません)。
+
xOffset
+
画像内の水平方向のオフセットを示す long。
+
yOffset
+
画像内の垂直方向のオフセットを示す long。
+
+ +

戻り値

+ +
+
void
+
+
+ +

例

+ +

この例では、setDragImage() メソッドの使用方法を示します。この例では example.gif という名前の画像ファイルを参照していることに注意しましょう。そのファイルが存在する場合はそのファイルがドラッグ画像として使用され、そのファイルが存在しない場合はブラウザがデフォルトのドラッグ画像を使用します。

+ +

demo

+ +
<!DOCTYPE html>
+<html lang=ja>
+<title>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><code>DataTransfer.setDragImage()</code> の例</h1>
+ <div>
+   <p id="source" ondragstart="dragstart_handler(event);" draggable="true">
+     この要素を選択し、ドロップゾーンにドラッグしてから選択を解除して要素を移動します。</p>
+ </div>
+ <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">ドロップゾーン</div>
+</body>
+</html>
+
+ +

仕様

+ + + + + + + + + + + + + + + + + + + + + +
仕様書ステータスコメント
{{SpecName('HTML WHATWG', 'interaction.html#dom-datatransfer-setdragimage','setDragImage()')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5.1', 'editing.html#dom-datatransfer-setdragimage','setDragImage()')}}{{Spec2('HTML5.1')}}W3C HTML5 に含まれない {{Spec2('HTML5 W3C')}}。
+ +

ブラウザの互換性

+ + + +

{{Compat("api.DataTransfer.setDragImage")}}

+ +

あわせて参照

+ +

{{page("/ja/docs/Web/API/DataTransfer", "あわせて参照")}}

diff --git a/files/ja/web/api/datatransfer/types/index.html b/files/ja/web/api/datatransfer/types/index.html new file mode 100644 index 0000000000..b060c6e984 --- /dev/null +++ b/files/ja/web/api/datatransfer/types/index.html @@ -0,0 +1,121 @@ +--- +title: DataTransfer.types +slug: Web/API/DataTransfer/types +tags: + - API + - HTML DOM + - Property + - Reference + - drag and drop +translation_of: Web/API/DataTransfer/types +--- +
{{APIRef("HTML Drag and Drop API")}}
+ +

DataTransfer.types 読み取り専用 プロパティは、{{event("dragstart")}} イベントで設定された ({{domxref("DOMString", "strings")}}としての) ドラッグデータフォーマットの配列を返します。フォーマットの順序は、ドラッグ操作に含まれるデータの順序と同じです。

+ +

フォーマットは、データのタイプまたはフォーマットを与える Unicode 文字列で、一般的には MIME タイプで与えられます。MIME タイプではない値の中には、レガシーな理由で特殊なものもあります (例えば "text" など)。

+ +

シンタックス

+ +
dataTransfer.types;
+
+ +

戻り値

+ +

ドラッグ操作で使用されるデータ形式の配列。各フォーマットは {{domxref("DOMString", "string")}} です。ドラッグ操作にデータが含まれていない場合、このリストは空になります。ドラッグ操作にファイルが含まれている場合は、その型の 1 つが文字列 Files になります。

+ +

例

+ +

この例では、types と {{domxref("DataTransfer.items", "items")}} プロパティを使用しています。

+ +
<!DOCTYPE html>
+<html lang=ja>
+<title>DataTransfer.{types,item}プロパティの例</title>
+<meta content="width=device-width">
+<style>
+  div {
+    margin: 0em;
+    padding: 2em;
+  }
+  #target {
+    border: 1px solid black;
+  }
+</style>
+<script>
+function dragstart_handler(ev) {
+ console.log("dragStart: target.id = " + ev.target.id);
+ // この要素の id をドラッグ ペイロードに追加し、
+ // drop ハンドラがどの要素をツリーに追加するかを知ることができるようにします。
+ ev.dataTransfer.setData("text/plain", ev.target.id);
+ ev.dataTransfer.effectAllowed = "move";
+}
+
+function drop_handler(ev) {
+ console.log("drop: target.id = " + ev.target.id);
+ ev.preventDefault();
+ // ターゲットの ID を取得し、移動した要素をターゲットの DOM に追加します。
+ var data = ev.dataTransfer.getData("text");
+ ev.target.appendChild(document.getElementById(data));
+ // 各フォーマットタイプをプリントする
+ if (ev.dataTransfer.types != null) {
+   for (var i=0; i < ev.dataTransfer.types.length; i++) {
+     console.log("... types[" + i + "] = " + ev.dataTransfer.types[i]);
+   }
+ }
+ // 各項目の "kind" と "type" をプリントする
+ if (ev.dataTransfer.items != null) {
+   for (var i=0; i < ev.dataTransfer.items.length; i++) {
+     console.log("... items[" + i + "].kind = " + ev.dataTransfer.items[i].kind + " ; type = " + ev.dataTransfer.items[i].type);
+   }
+ }
+}
+
+function dragover_handler(ev) {
+ console.log("dragOver");
+ ev.preventDefault();
+ // dropEffect を移動するように設定します。
+ ev.dataTransfer.dropEffect = "move"
+}
+</script>
+<body>
+<h1><code>DataTransfer</code>.{<code>types</code>, <code>items</code>} プロパティの例</h1>
+ <ul>
+   <li id="i1" ondragstart="dragstart_handler(event);" draggable="true">アイテム1をドロップゾーンにドラッグ</li>
+   <li id="i2" ondragstart="dragstart_handler(event);" draggable="true">アイテム2をドロップゾーンにドラッグ</li>
+ </ul>
+ <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">ドロップゾーン</div>
+</body>
+</html>
+
+ +

仕様

+ + + + + + + + + + + + + + + + + + + +
仕様書ステータスコメント
{{SpecName("HTML WHATWG", "interaction.html#dom-datatransfer-types", "types")}}{{Spec2("HTML WHATWG")}}
{{SpecName("HTML5.1", "editing.html#dom-datatransfer-types", "types")}}{{Spec2("HTML5.1")}}初期定義
+ +

ブラウザの互換性

+ + + +

{{Compat("api.DataTransfer.types")}}

+ +

あわせて参照

+ +

{{page("/ja/docs/Web/API/DataTransfer", "あわせて参照")}}

-- cgit v1.2.3-54-g00ecf