このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。
DataTransfer: dropEffect プロパティ
Baseline
広く利用可能
この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2015年7月以降、すべてのブラウザーで利用可能です。
DataTransfer.dropEffect プロパティは、ドラッグ&ドロップ操作中にユーザーに与えられるフィードバック(通常は視覚的)を制御します。これは、ドラッグ中に表示されるカーソルに影響します。例えば、ユーザーがターゲットのドロップ要素の上にカーソルを置くと、ブラウザーのカーソルが、どの種類の操作が発生するかを示すことができます。
DataTransfer オブジェクトを作成すると、 dropEffect には文字列の値が設定されます。取得時には、現在の値を返します。設定時、新しい値が以下の値のいずれかであれば、プロパティの現在の値が新しい値に設定され、それ以外の値は無視されます。
dragenter および dragover イベントでは、ユーザーがどのような操作を要求しているかに基づいて、dropEffect が初期化されます。これをどのように決定するかはプラットフォームによって異なりますが、通常、ユーザーは alt キーなどの修飾キーを押して、希望する操作を調整することができます。dragenter と dragover イベントのイベントハンドラー内では、ユーザーが要求している操作とは異なる操作が必要な場合、dropEffect を修正する必要があります。
drop および dragend イベントでは、 dropEffect に希望した動作が設定されます。これは、 dropEffect が前回の dragenter または dragover イベントの後に有していた値となります。例えば dragend イベントにおいて、望ましい dropEffect が "move" であれば、ドラッグされたデータをソースから削除する必要があります。
値
文字列で、ドラッグ操作の効果を表します。取りうる値は以下の通りです。
copy-
新しい場所にソースアイテムのコピーが作成されます。
move-
アイテムを新しい場所に移動します。
link-
新しい場所のソースにリンクが確立されます。
none-
アイテムはドロップしない場合があります。
dropEffect に他の値を代入しても効果はなく、古い値が保持されます。
例
この例では、dropEffect とeffectAllowed プロパティを使用しています。
HTML
<div>
<p id="source" draggable="true">
この要素を選択し、ドロップゾーンにドラッグして放すと、要素が移動します。
</p>
</div>
<div id="target">ドロップゾーン</div>
CSS
div {
margin: 0em;
padding: 2em;
}
#source {
color: blue;
border: 1px solid black;
}
#target {
border: 1px solid black;
}
JavaScript
const source = document.getElementById("source");
const target = document.getElementById("target");
source.addEventListener("dragstart", (ev) => {
console.log(
`dragStart: dropEffect = ${ev.dataTransfer.dropEffect} ; effectAllowed = ${ev.dataTransfer.effectAllowed}`,
);
// この要素の id をドラッグデータ本体に追加し、ドロップハンドラーが
// どの要素をツリーに追加するかを知ることができるようにします。
ev.dataTransfer.setData("text", ev.target.id);
ev.dataTransfer.effectAllowed = "move";
});
target.addEventListener("drop", (ev) => {
console.log(
`drop: dropEffect = ${ev.dataTransfer.dropEffect} ; effectAllowed = ${ev.dataTransfer.effectAllowed}`,
);
ev.preventDefault();
// ターゲットの ID を取得し、移動した要素をターゲットの DOM に追加します。
const data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
});
target.addEventListener("dragover", (ev) => {
console.log(
`dragOver: dropEffect = ${ev.dataTransfer.dropEffect} ; effectAllowed = ${ev.dataTransfer.effectAllowed}`,
);
ev.preventDefault();
// dropEffect を移動するように設定します。
ev.dataTransfer.dropEffect = "move";
});
仕様書
| 仕様書 |
|---|
| HTML # dom-datatransfer-dropeffect-dev |
ブラウザーの互換性
ブラウザー互換性一覧表を表示するには、JavaScript を有効にしてください。