DOM

DataTransfer.dropEffect プロパティ

[Edge]△？。→、、

ドラッグ＆ドロップ操作中にユーザーに与えられるフィードバック（通常は視覚的）を取得／設定します。

これは、ドラッグ中に表示されるカーソルに影響します。例えば、ユーザーがターゲットのドロップ要素の上にカーソルを置くと、ブラウザーのカーソルが、どの種類の操作が発生するかを示すことができます。

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

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

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

構文

値

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

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

例

<DIV id=IdTest contenteditable>ここにドロップ操作をしてみて…</DIV>
<SPAN id=IdLog></SPAN>

function Job(eve){  //dragend イベントの処理：
  D=eve; //
  DA=eve.dataTransfer;
  IdLog.innerHTML=IdLog.innerHTML+eve.dataTransfer.dropEffect;  //最初の dropEffect を記録。
//  if(eve.dropEffect=="move"){
    eve.dataTransfer.dropEffect="copy";  //dropEffect を変更。
//  }
  IdLog.innerHTML=IdLog.innerHTML+"→"+eve.dataTransfer.dropEffect+" ";  //変更後の dropEffect の記録。
}
//IdTest.ondrop=Job;
document.ondragend=Job;  //イベント割り当て。

テスト