このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
:-moz-drag-over
非標準: この機能は標準化されていません。非標準の機能はブラウザーの対応が限られ、将来的に変更または削除される可能性があるため、本番環境での使用は推奨されません。ただし、標準の選択肢が存在しない特定のケースでは、有効な代替手段となる場合があります。
:-moz-drag-over はCSS の擬似クラスで、Mozilla 拡張であり、dragover イベントが呼び出された時に要素に一致します。
構文
css
:-moz-drag-over { /* ... */}例
HTML
html
<div> <p>Drop target</p></div><div draggable="true"> <p>Draggable</p></div>JavaScript
ほとんどの要素はデータをドロップするのに妥当な場所ではないため、ドロップを許可するには、dragenter イベントまたはdragover イベント (またはその両方) を取り消すことで既定の動作を防ぐ必要があります。この例では、dragenter イベントを取り消すだけです。これは、要素がドロップ対象になるかどうかをブラウザーが評価するときに最初に発生するイベントです。詳細情報については、ドラッグ処理を運営しています： ドロップ対象を指定します。詳しくは、ドラッグ操作: ドロップ先の指定を参照してください。
js
const target = document.getElementById("drop-target");/* dragenter イベントはドロップ先に発生する */target.addEventListener( "dragenter", (event) => { // ドロップを受け付けるために、既定の動作が出て来ないようにする event.preventDefault(); }, false,);CSS
css
body { font-family: arial;}div { display: inline-block; width: 150px; height: 150px; border: 2px dotted black; background-color: aquamarine; margin: 1rem;}p { padding: 1rem;}以下の CSS は、ドラッグ可能な要素がドロップ領域に重なったときに、ドロップ対象の色を赤に変更します。
css
#drop-target { background-color: cornflowerblue;}#drop-target:-moz-drag-over { background-color: red;}結果
仕様書
いずれの標準にも含まれていません。