DataTransfer.dropEffect

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

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

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

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

シンタックス

dataTransfer.dropEffect;

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

copy
新しい場所にソースアイテムのコピーが作成されます。
move
アイテムを新しい場所に移動します。
link
新しい場所のソースにリンクが確立されます。
none
アイテムはドロップしない場合があります。

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

Example

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

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

仕様

仕様書 ステータス コメント
HTML Living Standard
dropEffect の定義
現行の標準
HTML 5.1
dropEffect の定義
勧告 初期定義

ブラウザの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
dropEffectChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 ありIE ? Opera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 未対応 なしSamsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明

あわせて参照