:-moz-drag-over

非标准:此特性未标准化。我们不建议在生产环境中使用非标准特性,因为它们浏览器支持有限,并且可能会更改或被移除。但是,在没有标准选项的特定情况下,它们可以是合适的替代方案。

:-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

大多数元素都不是有效的数据放置位置,因此为了允许放置,您必须通过取消 dragenterdragover(或两者)事件来阻止默认行为。在此示例中,我们只需要取消 dragenter 事件,这是浏览器评估元素是否可以作为放置目标时触发的第一个事件。有关更多信息,请参阅拖放操作:指定放置目标

js
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

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

结果

规范

不属于任何标准。

另见