DataTransfer.dropEffect

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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

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

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

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

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

copy

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

move

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

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

none

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

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

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

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
# dom-datatransfer-dropeffect-dev

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
dropEffect

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

関連情報