From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../web/api/datatransfer/effectallowed/index.html | 140 +++++++++++++++++++++ 1 file changed, 140 insertions(+) create mode 100644 files/ja/web/api/datatransfer/effectallowed/index.html (limited to 'files/ja/web/api/datatransfer/effectallowed/index.html') 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", "あわせて参照")}}

-- cgit v1.2.3-54-g00ecf