CSS-псевдокласс `:-moz-drag-over`

:-moz-drag-over — это псевдокласс CSS, являющийся расширением Mozilla, которое выбирает элемент при возникновении на нём события dragover.

Синтаксис

:-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 event fired on the drop target */
target.addEventListener("dragenter", (event) => {
  // prevent default to allow drop
  event.preventDefault();
});

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;
}

Результат

Спецификации

Не входит ни в один стандарт.

См. также

• Расширения CSS от Mozilla
• Перетаскивание в HTML