:-moz-drag-over

構文

:-moz-drag-over {
  /* ... */
}

例

HTML

<div id="drop-target">
  <p>Drop target</p>
</div>

<div draggable="true">
  <p>Draggable</p>
</div>

JavaScript

ほとんどの要素はデータをドロップするのに妥当な場所ではないため、ドロップを許可するには、dragenter イベントまたは dragover イベント (またはその両方) を取り消すことで既定の動作を防ぐ必要があります。 この例では、dragenter イベントを取り消すだけです。これは、要素がドロップ対象になるかどうかをブラウザーが評価するときに最初に発生するイベントです。 詳細情報については、ドラッグ処理を運営しています： ドロップ対象を指定します。 詳しくは、ドラッグ操作: ドロップ先の指定を参照してください。

const target = document.getElementById("drop-target");
/* dragenter イベントはドロップ先に発生する */
target.addEventListener(
  "dragenter",
  (event) => {
    // ドロップを受け付けるために、既定の動作が出て来ないようにする
    event.preventDefault();
  },
  false,
);

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 は、ドラッグ可能な要素がドロップ領域に重なったときに、ドロップ対象の色を赤に変更します。

#drop-target {
  background-color: cornflowerblue;
}
#drop-target:-moz-drag-over {
  background-color: red;
}

結果

仕様書

いずれの標準にも含まれていません。

関連情報

• Mozilla の CSS 拡張
• HTML ドラッグ＆ドロップ