DataTransfer.dropEffect

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

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

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

drop および dragend イベントでは、 dropEffect に希望した動作が設定されます。これは、 dropEffect が前回の dragenter または dragover イベントの後に有していた値となります。例えば dragend イベントにおいて、望ましい dropEffect が "move" であれば、ドラッグされたデータをソースから削除する必要があります。

値

文字列で、ドラッグ操作の効果を表します。取りうる値は以下の通りです。

copy

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

move

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

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

none

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

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

例

この例では、dropEffect とeffectAllowed プロパティを使用しています。

HTML

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

css
div {
  margin: 0em;
  padding: 2em;
}

#source {
  color: blue;
  border: 1px solid black;
}

#target {
  border: 1px solid black;
}

JavaScript

js
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";
}

結果

仕様書

Specification
HTML Standard
# dom-datatransfer-dropeffect-dev

ブラウザーの互換性

BCD tables only load in the browser

関連情報