:-moz-drag-over
Non-standard: This feature is not standardized. We do not recommend using non-standard features in production, as they have limited browser support, and may change or be removed. However, they can be a suitable alternative in specific cases where no standard option exists.
:-moz-drag-over là lớp giả CSS là một phần mở rộng Mozilla khớp với một phần tử khi sự kiện dragover được gọi trên nó.
Cú pháp
:-moz-drag-over {
/* ... */
}
Ví dụ
HTML
<div id="drop-target">
<p>Drop target</p>
</div>
<div draggable="true">
<p>Draggable</p>
</div>
JavaScript
Hầu hết các phần tử không phải là nơi hợp lệ để thả dữ liệu, vì vậy để cho phép thả, bạn phải ngăn hành vi mặc định bằng cách hủy các sự kiện dragenter hoặc dragover (hoặc cả hai). Trong ví dụ này, chúng ta chỉ cần hủy sự kiện dragenter, là sự kiện đầu tiên được kích hoạt khi trình duyệt đánh giá xem một phần tử có thể là mục tiêu thả hay không. Để biết thêm thông tin, xem Thao tác kéo: Chỉ định mục tiêu thả.
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 sau thay đổi màu của mục tiêu thả thành đỏ khi phần tử có thể kéo phủ lên vùng thả.
#drop-target {
background-color: cornflowerblue;
}
#drop-target:-moz-drag-over {
background-color: red;
}
Kết quả
Thông số kỹ thuật
Không thuộc bất kỳ tiêu chuẩn nào.