DataTransfer.dropEffect

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

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

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

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

シンタックス

dataTransfer.dropEffect;

値

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

copy

新しい場所にソースアイテムのコピーが作成されます。

move

アイテムを新しい場所に移動します。

link

新しい場所のソースにリンクが確立されます。

none

アイテムはドロップしない場合があります。

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

Example

この例では、dropEffect と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"
}

仕様

ブラウザの互換性

あわせて参照