diff options
Diffstat (limited to 'files/ja/web/api/datatransfer/dropeffect/index.html')
| -rw-r--r-- | files/ja/web/api/datatransfer/dropeffect/index.html | 137 |
1 files changed, 137 insertions, 0 deletions
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> |