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

-- cgit v1.2.3-54-g00ecf