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 キーなどの修飾キーを押して、希望する操作を調整することができます。dragenter
と dragover
イベントのイベントハンドラー内では、ユーザーが要求している操作とは異なる操作が必要な場合、dropEffect
を修正する必要があります。
drop
および dragend
イベントでは、 dropEffect
に希望した動作が設定されます。これは、 dropEffect
が前回の dragenter
または dragover
イベントの後に有していた値となります。例えば dragend
イベントにおいて、望ましい dropEffect が "move" であれば、ドラッグされたデータをソースから削除する必要があります。
値
例
この例では、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";
}
結果
仕様書
Specification |
---|
HTML Standard # dom-datatransfer-dropeffect-dev |
ブラウザーの互換性
BCD tables only load in the browser