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

結果

規範

不屬於任何標準。

另見