diff options
Diffstat (limited to 'files/ja/web/api/datatransfer')
| -rw-r--r-- | files/ja/web/api/datatransfer/cleardata/index.html | 189 | ||||
| -rw-r--r-- | files/ja/web/api/datatransfer/datatransfer/index.html | 48 | ||||
| -rw-r--r-- | files/ja/web/api/datatransfer/dropeffect/index.html | 137 | ||||
| -rw-r--r-- | files/ja/web/api/datatransfer/effectallowed/index.html | 140 | ||||
| -rw-r--r-- | files/ja/web/api/datatransfer/files/index.html | 62 | ||||
| -rw-r--r-- | files/ja/web/api/datatransfer/getdata/index.html | 165 | ||||
| -rw-r--r-- | files/ja/web/api/datatransfer/index.html | 151 | ||||
| -rw-r--r-- | files/ja/web/api/datatransfer/items/index.html | 119 | ||||
| -rw-r--r-- | files/ja/web/api/datatransfer/setdata/index.html | 174 | ||||
| -rw-r--r-- | files/ja/web/api/datatransfer/setdragimage/index.html | 137 | ||||
| -rw-r--r-- | files/ja/web/api/datatransfer/types/index.html | 121 |
11 files changed, 1443 insertions, 0 deletions
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 +--- +<div>{{APIRef("HTML Drag and Drop API")}}</div> + +<p><strong><code>DataTransfer.clearData()</code></strong> メソッドは、指定されたタイプのドラッグ操作の {{domxref("DataTransfer", "ドラッグデータ")}} を削除します。指定された型のデータが存在しない場合、このメソッドは何もしません。</p> + +<p class="note">このメソッドが引数なしで呼び出された場合、またはフォーマットが空の {{domxref("DOMString", "string")}} であった場合、すべての型のデータが削除されます。</p> + +<p>このメソッドはドラッグ操作からファイルを削除<em>しない</em>ので、ドラッグに含まれるファイルがある場合、オブジェクトの {{domxref("DataTransfer.types")}} リストに <code>"Files"</code> タイプのエントリが残る可能性があります。</p> + +<div class="note"> +<p>このメソッドは、{{event("dragstart")}} イベントのハンドラでのみ使用できます。なぜなら、ドラッグ操作のデータストアが書き込み可能なのはその時だけだからです。</p> +</div> + +<h2 id="シンタックス">シンタックス</h2> + +<pre class="syntaxbox notranslate"><var>DataTransfer</var>.clearData([<em>format</em>]); +</pre> + +<h3 id="パラメータ">パラメータ</h3> + +<dl> + <dt><code>format</code> {{optional_inline}}</dt> + <dd>削除するデータの型を指定する {{domxref("DOMString", "文字列")}}。このパラメータが空の文字列であったり、指定されていない場合は、すべての型のデータが削除されます。</dd> +</dl> + +<h2 id="Example">Example</h2> + +<p>この例では、{{domxref("DataTransfer")}} オブジェクトの{{domxref("DataTransfer.getData()", "getData()")}}、{{domxref("DataTransfer.setData()", "setData()")}}、および {{domxref("DataTransfer.clearData()", "clearData()")}} メソッドを使用しています。</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><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> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css notranslate">span.tweaked { + display: inline-block; + margin: 1em 0; + padding: 1em 2em; +} + +#source { + color: blue; + border: 1px solid black; +} + +#target { + border: 1px solid black; +} +</pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js notranslate">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 = "ドロップゾーンに入りました!"; + } +}) +</pre> + +<p>{{EmbedLiveSample('Example', 300, 250)}}</p> + +<h2 id="仕様">仕様</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-cleardata','DataTransfer.clearData()')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'editing.html#dom-datatransfer-cleardata','DataTransfer.clearData()')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>初期定義</td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザの互換性">ブラウザの互換性</h2> + +<div class="hidden">このページの互換性一覧表は、構造化データから生成されています。データに貢献したい方は、https://github.com/mdn/browser-compat-data をチェックしてプルリクエストを送ってください。</div> + +<p>{{Compat("api.DataTransfer.clearData")}}</p> + +<h2 id="あわせて参照">あわせて参照</h2> + +<p>{{page("/ja/docs/Web/API/DataTransfer", "あわせて参照")}}</p> 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 +--- +<p>{{APIRef("HTML Drag and Drop API")}}</p> + +<p><strong><code>DataTransfer</code></strong> のコンストラクタは、新しい {{domxref("DataTransfer")}} オブジェクトのインスタンスを作成します。</p> + +<h2 id="シンタックス">シンタックス</h2> + +<pre class="syntaxbox notranslate">var <em>dataTrans</em> = new DataTransfer()</pre> + +<h3 id="パラメータ">パラメータ</h3> + +<p>なし</p> + +<h2 id="仕様">仕様</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','#dom-datatransfer','the DataTransfer() constructor')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>初期定義</td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザの互換性">ブラウザの互換性</h2> + +<div> +<div class="hidden">このページの互換性一覧表は、構造化データから生成されています。データに貢献したい方は、https://github.com/mdn/browser-compat-data をチェックしてプルリクエストを送ってください。</div> + +<p>{{Compat("api.DataTransfer.DataTransfer")}}</p> +</div> 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 +--- +<div>{{APIRef("HTML Drag and Drop API")}}</div> + +<p><strong><code>DataTransfer.dropEffect</code></strong> プロパティは、ドラッグ＆ドロップ操作中にユーザに与えられるフィードバック (通常は視覚的) を制御します。これは、ドラッグ中に表示されるカーソルに影響します。例えば、ユーザがターゲットのドロップ要素の上にカーソルを置くと、ブラウザのカーソルは、どのタイプの操作が発生するかを示すことができます。</p> + +<p>{{domxref("DataTransfer")}} オブジェクトを作成すると、<code>dropEffect</code> には文字列の値が設定されます。取得時には、現在の値を返します。設定時、新しい値が以下の値のいずれかであれば、プロパティの現在の値が新しい値に設定され、それ以外の値は無視されます。</p> + +<p>{{event("dragenter")}} と {{event("dragover")}} イベントでは、ユーザーがどのようなアクションを要求しているかに基づいて、<code>dropEffect</code> が初期化されます。これをどのように決定するかはプラットフォームによって異なりますが、通常、ユーザーは alt キーなどの修飾キーを押して、希望するアクションを調整することができます。{{event("dragenter")}} と {{event("dragover")}} イベントのイベントハンドラ内では、ユーザーが要求しているアクションとは異なるアクションが必要な場合、<code>dropEffect</code> を修正する必要があります。</p> + +<p>{{event("drop")}} と {{event("dragend")}} イベントでは、<code>dropEffect</code> には希望するアクションが設定され、前回の {{event("dragenter")}} または {{event("dragover")}} イベントの後の値が <code>dropEffect</code> になります。例えば、{{event("dragend")}} イベントで、希望する dropEffect が "move" であれば、ドラッグされているデータはソースから削除されるべきです。</p> + +<h2 id="シンタックス">シンタックス</h2> + +<pre class="syntaxbox notranslate"><var>dataTransfer</var>.dropEffect; +</pre> + +<h3 id="値">値</h3> + +<p>ドラッグ操作の効果を表す {{domxref("DOMString")}}。可能な値は以下の通りです。</p> + +<dl> + <dt><code>copy</code></dt> + <dd>新しい場所にソースアイテムのコピーが作成されます。</dd> + <dt><code>move</code></dt> + <dd>アイテムを新しい場所に移動します。</dd> + <dt><code>link</code></dt> + <dd>新しい場所のソースにリンクが確立されます。</dd> + <dt><code>none</code></dt> + <dd>アイテムはドロップしない場合があります。</dd> +</dl> + +<p><code>dropEffect</code> に他の値を代入しても効果はなく、古い値が保持されます。</p> + +<h2 id="Example">Example</h2> + +<p>この例では、<code>dropEffect</code> と{{domxref("DataTransfer.effectAllowed", "effectAllowed")}} プロパティを使用しています。</p> + +<h3 id="HTML_コンテンツ">HTML コンテンツ</h3> + +<pre class="brush: html notranslate"><div> + <p id="source" ondragstart="dragstart_handler(event);" draggable="true"> + この要素を選択し、ドロップゾーンにドラッグしてから選択を解除して要素を移動します。 + </p> +</div> +<div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">ドロップゾーン</div> +</pre> + +<h3 id="CSS_コンテンツ">CSS コンテンツ</h3> + +<pre class="brush: css notranslate">div { + margin: 0em; + padding: 2em; +} + +#source { + color: blue; + border: 1px solid black; +} + +#target { + border: 1px solid black; +} +</pre> + +<h3 id="JavaScript_コンテンツ">JavaScript コンテンツ</h3> + +<pre class="brush: js notranslate">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" +} +</pre> + +<p>{{EmbedLiveSample('Example', 300, 250)}}</p> + +<h2 id="仕様">仕様</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-dropeffect','dropEffect')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'editing.html#dom-datatransfer-dropeffect','dropEffect')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>初期定義</td> + </tr> + <tr> + </tr> + </tbody> +</table> + +<h2 id="ブラウザの互換性">ブラウザの互換性</h2> + +<div class="hidden">このページの互換性一覧表は、構造化データから生成されています。データに貢献したい方は、https://github.com/mdn/browser-compat-data をチェックしてプルリクエストを送ってください。</div> + +<p>{{Compat("api.DataTransfer.dropEffect")}}</p> + +<h2 id="あわせて参照">あわせて参照</h2> + +<p>{{page("/ja/docs/Web/API/DataTransfer", "あわせて参照")}}</p> 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 +--- +<div>{{APIRef("HTML Drag and Drop API")}}</div> + +<p><strong><code>DataTransfer.effectAllowed</code></strong> プロパティは、ドラッグ操作で許可される effect を指定します。<em>コピー</em>操作は、ドラッグされるデータが現在の位置からドロップ位置にコピーされることを示すために使用されます。<em>移動</em>操作は、ドラッグされるデータが移動されることを示すために使用され、<em>リンク</em>操作は、ソース・ロケーションとドロップ・ロケーションの間に何らかの形の関係または接続が作成されることを示すために使用されます。</p> + +<p>このプロパティは、{{event("dragstart")}} イベントで設定して、ドラッグソースのドラッグ効果を設定する必要があります。イベントハンドラ {{event("dragenter")}} および{{event("dragover")}} 内では、このプロパティは {{event("dragstart")}} イベントで割り当てられた値に設定されるため、どの効果が許可されているかを決定するために <code>effectAllowed</code> を使用することができます。</p> + +<p>イベント {{event("dragstart")}} 以外のイベントで <code>effectAllowed</code> に値を代入しても何の効果もありません。</p> + +<h2 id="シンタックス">シンタックス</h2> + +<pre class="syntaxbox notranslate"><var>dataTransfer</var>.effectAllowed; +</pre> + +<h3 id="値">値</h3> + +<p>許可されているドラッグ操作を表す {{domxref("DOMString")}}。可能な値は以下の通りです。</p> + +<dl> + <dt>none</dt> + <dd>アイテムはドロップしない場合があります。</dd> + <dt>copy</dt> + <dd>ソースアイテムのコピーは、新しい場所で作成することができます。</dd> + <dt>copyLink</dt> + <dd>コピーやリンク操作は許可されています。</dd> + <dt>copyMove</dt> + <dd>コピーや移動の操作は許可されています。</dd> + <dt>link</dt> + <dd>新しい場所のソースへのリンクが確立されている場合があります。</dd> + <dt>linkMove</dt> + <dd>リンクや移動の操作は許可されています。</dd> + <dt>move</dt> + <dd>アイテムは新しい場所に移動することができます。</dd> + <dt>all</dt> + <dd>すべての操作が許可されています。</dd> + <dt>uninitialized</dt> + <dd>effect が設定されていない場合のデフォルト値で、全ての effect に相当します。</dd> +</dl> + +<p><code>effectAllowed</code> に他の値を代入しても効果はなく、古い値が保持されます。</p> + +<p>Internet Explorer では、値を小文字に変更するので、<code>linkMove</code> は <code>linkmove</code> になります。</p> + +<h2 id="例">例</h2> + +<p>この例では、<code>effectAllowed</code> プロパティと {{domxref("DataTransfer.dropEffect", "dropEffect")}} プロパティを使用しています。</p> + +<pre class="brush: js notranslate"><!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> +</pre> + +<h2 id="仕様">仕様</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-effectallowed", "effectAllowed")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("HTML5.1", "editing.html#dom-datatransfer-effectallowed", "effectAllowed")}}</td> + <td>{{Spec2("HTML5.1")}}</td> + <td>初期定義</td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザの互換性">ブラウザの互換性</h2> + +<div class="hidden">このページの互換性一覧表は、構造化データから生成されています。データに貢献したい方は、https://github.com/mdn/browser-compat-data をチェックしてプルリクエストを送ってください。</div> + +<p>{{Compat("api.DataTransfer.effectAllowed")}}</p> + +<h2 id="あわせて参照">あわせて参照</h2> + +<p>{{page("/ja/docs/Web/API/DataTransfer", "あわせて参照")}}</p> 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 +--- +<div>{{APIRef("HTML Drag and Drop API")}}</div> + +<p><strong><code>DataTransfer.files</code></strong> プロパティは、ドラッグ操作中の {{domxref("FileList", "ファイルのリスト")}} となります。操作にファイルが含まれていない場合、リストは空です。</p> + +<p>この機能を利用して、ユーザーの<em>デスクトップ</em>からブラウザにファイルをドラッグすることができます。</p> + +<h2 id="シンタックス">シンタックス</h2> + +<pre class="syntaxbox notranslate"><var>dataTransfer</var>.files; +</pre> + +<h3 id="戻り値">戻り値</h3> + +<p>ドラッグ操作のファイルの {{domxref("FileList", "list")}}。ドラッグ操作にファイルがない場合、リストは空です。</p> + +<h2 id="例">例</h2> + +<p>このインターフェイスの実例は2つあります。</p> + +<ul> + <li>Firefox のみ: <a class="external" href="http://jsfiddle.net/9C2EF/">http://jsfiddle.net/9C2EF/</a></li> + <li>全てのブラウザ: <a class="external" href="https://jsbin.com/hiqasek/edit?html,js,output">https://jsbin.com/hiqasek/</a></li> +</ul> + +<h2 id="仕様">仕様</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-files", "files")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("HTML5.1", "editing.html#dom-datatransfer-files", "files")}}</td> + <td>{{Spec2("HTML5.1")}}</td> + <td>初期定義</td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザの互換性">ブラウザの互換性</h2> + +<div class="hidden">このページの互換性一覧表は、構造化データから生成されています。データに貢献したい方は、https://github.com/mdn/browser-compat-data をチェックしてプルリクエストを送ってください。</div> + +<p>{{Compat("api.DataTransfer.files")}}</p> 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 +--- +<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> 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 +--- +<div>{{APIRef("HTML Drag and Drop API")}}</div> + +<p><strong><code>DataTransfer</code></strong> オブジェクトは、ドラッグ＆ドロップ操作中にドラッグされているデータを保持するために使用されます。これは、1 つ以上のデータ項目を保持することができ、それぞれが 1 つ以上のデータ型を持ちます。ドラッグ＆ドロップの詳細については、<a href="/ja/docs/Web/API/HTML_Drag_and_Drop_API">HTML ドラッグ＆ドロップ API</a> を参照してください。</p> + +<p>このオブジェクトはすべての {{domxref("DragEvent","ドラッグイベント")}} の {{domxref("DragEvent.dataTransfer","dataTransfer")}} プロパティからアクセスすることができます。</p> + +<h2 id="Constructor" name="Constructor">コンストラクタ</h2> + +<dl> + <dt>{{domxref("DataTransfer.DataTransfer","DataTransfer()")}}</dt> + <dd>新規 <code>DataTransfer</code> オブジェクトを作成して返す。</dd> +</dl> + +<h2 id="Properties" name="Properties">プロパティ一覧</h2> + +<h3 id="Standard_properties" name="Standard_properties">標準プロパティ</h3> + +<dl> + <dt>{{domxref("DataTransfer.dropEffect")}}</dt> + <dd>現在選択されているドラッグ&ドロップ操作の種類を取得したり、新しい操作の種類をセットしたりします。値は <code>none</code>, <code>copy</code>, <code>link</code>, <code>move</code> のいずれかです。</dd> + <dt>{{domxref("DataTransfer.effectAllowed")}}</dt> + <dd>とりうるすべての操作の種類を与えます。<code>none</code>, <code>copy</code>, <code>copyLink</code>, <code>copyMove</code>, <code>link</code>, <code>linkMove</code>, <code>move</code>, <code>all</code>, <code>uninitialized</code> のいずれかです。</dd> +</dl> + +<dl> + <dt>{{domxref("DataTransfer.files")}}</dt> + <dd>データトランスファーが保持していて利用可能なすべてのローカルファイルのリストを保持します。ドラッグ操作がファイルのドラッグによるものではない場合、このプロパティは空のリストになります。</dd> + <dt>{{domxref("DataTransfer.items")}} {{readonlyInline}}</dt> + <dd> 全てのドラッグデータのリストである {{domxref("DataTransferItemList")}} オブジェクトを返します。.</dd> + <dt>{{domxref("DataTransfer.types")}} {{readonlyInline}}</dt> + <dd>{{event("dragstart")}} イベントでセットされたフォーマットを示す{{domxref("DOMString","strings")}}の配列。</dd> +</dl> + +<h3 id="Gecko_properties" name="Gecko_properties">Gecko プロパティ</h3> + +<p>{{SeeCompatTable}}</p> + +<div class="note"><strong>注:</strong> この節の全プロパティは Gecko-固有のものです。</div> + +<dl> + <dt>{{domxref("DataTransfer.mozCursor")}}</dt> + <dd>ドラッグカーソルの状態を返します。主にタブドラッグの際のカーソルを制御するのに使います。</dd> + <dt>{{domxref("DataTransfer.mozSourceNode")}} {{readonlyInline}}</dt> + <dd>ドラッグ操作を開始するためにボタンを押下したときにマウスカーソルのあった{{ domxref("Node") }}を返します。外部アプリケーションからのドラッグの場合や、ドラッグを開始したノードが呼び出し元からアクセスできない物であった場合は、値は <code>null</code> となります。</dd> + <dt>{{domxref("DataTransfer.mozUserCancelled")}} {{readonlyInline}}</dt> + <dd>このプロパティは <code>dragend</code> イベントに対してのみ適用され、ユーザーが Esc キーを押下してドラッグ操作を取り消した場合は値が <code>true</code> となります。不正な場所でドロップした場合など、その他の理由でドラッグ操作に失敗した場合には、値は <code>false</code> となります。</dd> +</dl> + +<h3 id="Deprecated_properties" name="Deprecated_properties">Deprecated プロパティ</h3> + +<dl> + <dt>{{domxref("DataTransfer.mozItemCount")}} {{readonlyInline}} {{deprecated_inline}}</dt> + <dd>ドラッグされている項目の個数を返します。Firefox 71 で削除されます。</dd> +</dl> + +<h2 id="Methods" name="Methods">メソッド</h2> + +<h3 id="Standard_methods" name="Standard_methods">標準メソッド</h3> + +<dl> + <dt>{{domxref("DataTransfer.clearData()")}}</dt> + <dd>指定された型のデータを削除します。型の指定は省略可能です。型として空の文字列を指定した場合、もしくは型を指定しなかった場合、すべての型のデータが削除されます。指定された型のデータが存在しない場合、またはデータトランスファーが何もデータを持っていない場合、このメソッドは何もしません。</dd> + <dt>{{domxref("DataTransfer.getData()")}}</dt> + <dd>指定された型のデータを取得します。指定された型のデータが存在しない場合、またはデータトランスファーが何もデータを保持していない場合、空文字を返します。</dd> + <dt>{{domxref("DataTransfer.setData()")}}</dt> + <dd>指定された型のデータを設定します。その型のデータが存在しない場合、データはリストの最後に追加されるため、データ型のリストの最後の項目は、最後に追加された新しいデータ型となります。その型のデータがすでに存在している場合、データ型のリストにおける元と同じ位置で、古いデータが新しいデータと置き換わります。</dd> + <dt>{{domxref("DataTransfer.setDragImage()")}}</dt> + <dd>ドラッグ中に表示されるフィードバックイメージについて、独自のものを使用したい場合に、それをセットします。</dd> +</dl> + +<h3 id="Gecko_methods" name="Gecko_methods">Gecko メソッド</h3> + +<p>{{Non-standard_header()}}</p> + +<div class="note"><strong>注:</strong> この節の全メソッドは Gecko-固有のものです。</div> + +<dl> + <dt>{{domxref("DataTransfer.addElement()")}}</dt> + <dd>ドラッグ元の要素を指定します。</dd> +</dl> + +<h3 id="Deprecated_methods" name="Deprecated_methods">Deprecated メソッド</h3> + +<dl> + <dt>{{domxref("DataTransfer.mozClearDataAt()")}} {{deprecated_inline}}</dt> + <dd>指定されたインデックスの項目について、指定された形式に関連付けられたデータを削除します。インデックスは 0〜(項目の数-1）の範囲です。Firefox 71 で削除されます。</dd> + <dt>{{domxref("DataTransfer.mozGetDataAt()")}} {{deprecated_inline}}</dt> + <dd>指定されたインデックスの項目の、指定された形式のデータを取得します。存在しない項目またはデータ形式を指定した場合は null を返します。インデックスは 0〜(項目の数-1）の範囲です。Firefox 71 で削除されます。</dd> + <dt>{{domxref("DataTransfer.mozSetDataAt()")}} {{deprecated_inline}}</dt> + <dd>データトランスファーは複数の項目を保持する事ができ、それぞれの項目には 0 から始まるインデックスが付けられます。<code>mozSetDataAt()</code> は、すでに存在する項目を変更する場合には <code>mozItemCount</code> より小さい値をインデックスとして指定し、新しい項目を追加する場合は <code>mozItemCount</code> に等しい値をインデックスとして指定します。また、<code>mozItemCount</code> は項目を追加する度に増加します。Firefox 71 で削除されます。</dd> + <dt>{{domxref("DataTransfer.mozTypesAt()")}} {{deprecated_inline}}</dt> + <dd>指定されたインデックスの項目が保持しているデータの形式のリスト（文字列の配列）を返します。0〜(項目の数-1）の範囲外のインデックスを指定した場合は、空のリストを返します。Firefox 71 で削除されます。</dd> +</dl> + +<h2 id="Examples" name="Examples">例</h2> + +<p>この文書に載っているすべてのメソッドとプロパティは自分自身のリファレンスページを持ち、そのページに直接例が載っているか、例へのリンクがあるかのいずれかです。</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#datatransfer','DataTransfer')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td><code>mozCursor</code>, <code>mozItemCount</code>, <code>mozSourceNode</code>, <code>mozUserCancelled</code>, <code>addElement()</code>, <code>mozClearDataAt()</code>, <code>mozGetDataAt()</code>, <code>mozSetDataAt()</code> and <code>mozTypesAt</code> are Gecko specific.</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'editing.html#the-datatransfer-interface','DataTransfer')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Not included in W3C HTML5 {{Spec2('HTML5 W3C')}}</td> + </tr> + <tr> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2> + + + +<p>{{Compat("api.DataTransfer")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="https://wiki.developer.mozilla.org/ja/docs/Web/API/HTML_Drag_and_Drop_API">Drag and drop</a></li> + <li><a href="https://wiki.developer.mozilla.org/ja/docs/Web/Guide/HTML/Drag_operations">Drag Operations</a></li> + <li><a href="https://wiki.developer.mozilla.org/ja/docs/Web/Guide/HTML/Recommended_Drag_Types">Recommended Drag Types</a></li> + <li><a href="https://wiki.developer.mozilla.org/ja/docs/Web/Guide/HTML/Dragging_and_Dropping_Multiple_Items">Dragging and Dropping Multiple Items</a></li> + <li><a href="https://codepen.io/tech_query/pen/MqGgap">DataTransfer test - Paste or Drag</a></li> +</ul> 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 +--- +<div>{{APIRef("HTML Drag and Drop API")}}</div> + +<p>読み取り専用の {{domxref("DataTransfer")}} プロパティの <code>items</code> プロパティは、ドラッグ操作での {{domxref("DataTransferItemList", "list")}} の {{domxref("DataTransferItem", "DataTransfer items")}} です。リストには操作中の項目ごとに1つの項目が含まれており、操作中に項目がなかった場合はリストは空になります。</p> + +<h2 id="シンタックス">シンタックス</h2> + +<pre class="syntaxbox notranslate"><em>itemList</em> = <em>dataTransfer</em>.items; +</pre> + +<h3 id="戻り値">戻り値</h3> + +<p>ドラッグ操作でドラッグされる項目を表す {{domxref("DataTransferItem")}} オブジェクトを含む {{domxref("DataTransferItemList")}} オブジェクトで、ドラッグされるオブジェクトごとに1つのリスト項目があります。ドラッグ操作にデータがない場合、リストは空です。</p> + +<h2 id="例">例</h2> + +<p>この例では、<code>items</code> と{{domxref("DataTransfer.types", "types")}} プロパティを使用しています。</p> + +<pre class="brush: js notranslate"><!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> +</pre> + +<h2 id="仕様">仕様</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-items", "items")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("HTML5.1", "editing.html#dom-datatransfer-items", "items")}}</td> + <td>{{Spec2("HTML5.1")}}</td> + <td>初期定義</td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザの互換性">ブラウザの互換性</h2> + +<div class="hidden">このページの互換性一覧表は、構造化データから生成されています。データに貢献したい方は、https://github.com/mdn/browser-compat-data をチェックしてプルリクエストを送ってください。</div> + +<p>{{Compat("api.DataTransfer.items")}}</p> + +<h2 id="あわせて参照">あわせて参照</h2> + +<p>{{page("/ja/docs/Web/API/DataTransfer", "あわせて参照")}}</p> 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 +--- +<div>{{APIRef("HTML Drag and Drop API")}}</div> + +<p><strong><code>DataTransfer.setData()</code></strong> メソッドは、ドラッグ操作の {{domxref("DataTransfer","drag data")}} に指定したデータと型を設定します。与えられた型のデータが存在しない場合、このデータはドラッグデータストアの末尾に加えられ、このような {{domxref("DataTransfer.types","types")}} リストの最後のアイテムは新しい型になります。与えられた型のデータが存在する場合、既存のデータが同じ位置で置き換えられます。同じ型のデータが置き換えられる時、{{domxref("DataTransfer.types","types")}} リストの並び順は変更されません。</p> + +<p>データ型は、例えば <code>text/plain</code> や <code>text/uri-list</code> です。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">void <var>dataTransfer</var>.setData(format, data); +</pre> + +<h3 id="引数">引数</h3> + +<dl> + <dt><em>format</em></dt> + <dd>{{domxref("DataTransfer","drag object")}} に追加するドラッグデータの型を表す {{domxref("DOMString")}}。</dd> + <dt><em>data</em></dt> + <dd>{{domxref("DataTransfer","drag object")}} に追加するデータを表す {{domxref("DOMString")}}。</dd> +</dl> + +<h3 id="Return_value" name="Return_value">戻り値</h3> + +<dl> + <dt>無効。</dt> +</dl> + +<h2 id="Example" name="Example">例</h2> + +<p>この例は、{{domxref("DataTransfer")}} オブジェクトの {{domxref("DataTransfer.getData","getData()")}} メソッドおよび {{domxref("DataTransfer.setData","setData()")}} メソッド、{{domxref("DataTransfer.clearData","clearData()")}} メソッドの使い方を紹介します。</p> + +<pre class="brush: js"><!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> +</pre> + +<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-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>初期定義</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</td> + <td>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>{{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("/docs/Web/API/DataTransfer", "See_also")}}</p> 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 +--- +<div>{{APIRef("HTML Drag and Drop API")}}</div> + +<p>ドラッグが発生すると、ドラッグ対象 ({{event("dragstart")}} イベントが発生した要素) から半透明の画像が生成され、ドラッグ中にマウスポインタに沿って移動します。この画像は自動的に作成されるので、自分で作成する必要はありません。ただし、カスタム画像が必要な場合は、<strong><code>DataTransfer.setDragImage()</code></strong> メソッドを使用して、使用するカスタム画像を設定することができます。画像は通常、{{HTMLElement("image")}} 要素になりますが、{{HTMLElement("canvas")}} やその他の可視要素であっても構いません。</p> + +<p>メソッドの <code>x</code> 座標と <code>y</code> 座標は、マウスポインタに対する画像の相対的な表示方法を定義します。これらの座標は、マウスカーソルがあるべき画像のオフセットを定義します。例えば、ポインタが中心に来るように画像を表示するには、画像の幅と高さの半分の値を使用します。</p> + +<p>このメソッドは {{event("dragstart")}} イベントハンドラ内で呼び出す必要があります。</p> + +<h2 id="Syntax" name="Syntax">シンタックス</h2> + +<pre class="syntaxbox notranslate">void <em>dataTransfer</em>.setDragImage(img | element, xOffset, yOffset); +</pre> + +<h3 id="引数">引数</h3> + +<dl> + <dt><em>img | </em>element</dt> + <dd>ドラッグフィードバック画像に使用する画像 {{domxref("Element")}} 要素。</dd> + <dd>もし {{domxref("Element")}} が img 要素であれば、ドラッグデータストアのビットマップをその要素の画像に設定します (その要素に固有のサイズで)。そうでなければ、ドラッグデータストアのビットマップを、与えられた要素から生成された画像に設定します (そのための正確なメカニズムは現在のところ指定されていません)。</dd> + <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> + +<p><a href="https://codepen.io/webgeeker/full/KBzrxE/">demo</a></p> + +<pre class="brush: js notranslate"><!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> +</pre> + +<h2 id="仕様">仕様</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-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>W3C HTML5 に含まれない {{Spec2('HTML5 W3C')}}。</td> + </tr> + <tr> + </tr> + </tbody> +</table> + +<h2 id="ブラウザの互換性">ブラウザの互換性</h2> + +<div class="hidden">このページの互換性一覧表は、構造化データから生成されています。データに貢献したい方は、https://github.com/mdn/browser-compat-data をチェックしてプルリクエストを送ってください。</div> + +<p>{{Compat("api.DataTransfer.setDragImage")}}</p> + +<h2 id="See_also" name="See_also">あわせて参照</h2> + +<p>{{page("/ja/docs/Web/API/DataTransfer", "あわせて参照")}}</p> 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 +--- +<div>{{APIRef("HTML Drag and Drop API")}}</div> + +<p><strong><code>DataTransfer.types</code></strong> 読み取り専用 プロパティは、{{event("dragstart")}} イベントで設定された ({{domxref("DOMString", "strings")}}としての) ドラッグデータフォーマットの配列を返します。フォーマットの順序は、ドラッグ操作に含まれるデータの順序と同じです。</p> + +<p>フォーマットは、データのタイプまたはフォーマットを与える Unicode 文字列で、一般的には MIME タイプで与えられます。MIME タイプではない値の中には、レガシーな理由で特殊なものもあります (例えば "<code>text</code>" など)。</p> + +<h2 id="シンタックス">シンタックス</h2> + +<pre class="syntaxbox notranslate"><var>dataTransfer</var>.types; +</pre> + +<h3 id="戻り値">戻り値</h3> + +<p>ドラッグ操作で使用されるデータ形式の配列。各フォーマットは {{domxref("DOMString", "string")}} です。ドラッグ操作にデータが含まれていない場合、このリストは空になります。ドラッグ操作にファイルが含まれている場合は、その型の 1 つが文字列 <code>Files</code> になります。</p> + +<h2 id="例">例</h2> + +<p>この例では、<code>types</code> と {{domxref("DataTransfer.items", "items")}} プロパティを使用しています。</p> + +<pre class="brush: js notranslate"><!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> +</pre> + +<h2 id="仕様">仕様</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-types", "types")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("HTML5.1", "editing.html#dom-datatransfer-types", "types")}}</td> + <td>{{Spec2("HTML5.1")}}</td> + <td>初期定義</td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザの互換性">ブラウザの互換性</h2> + +<div class="hidden">このページの互換性一覧表は、構造化データから生成されています。データに貢献したい方は、https://github.com/mdn/browser-compat-data をチェックしてプルリクエストを送ってください。</div> + +<p>{{Compat("api.DataTransfer.types")}}</p> + +<h2 id="あわせて参照">あわせて参照</h2> + +<p>{{page("/ja/docs/Web/API/DataTransfer", "あわせて参照")}}</p> |