:-moz-drag-over

非标准：此功能是非标准的，并且不在标准轨道上。不要在面向 Web 的生产站点上使用它：它不会对每个用户都起作用。实现之间也可能存在很大的不兼容性，并且行为将来可能会发生变化。

:-moz-drag-over CSS 伪类是一个 Mozilla 扩展，当在元素上调用 dragover 事件时，它会匹配该元素。

语法

css

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

示例

HTML

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();
  },
  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;
}

结果

规范

不属于任何标准。