Thuộc tính ondragleave HTML


Định nghĩa và Cách sử dụng

Thuộc tính ondragleave kích hoạt khi phần tử có thể kéo hoặc lựa chọn văn bản rời khỏi mục tiêu thả hợp lệ.

Các sự kiện ondragenter và ondragleave có thể giúp người dùng hiểu rằng một phần tử có thể kéo sắp đi vào hoặc rời khỏi mục tiêu thả. Điều này có thể được thực hiện, ví dụ: đặt màu nền khi phần tử có thể kéo đi vào mục tiêu thả và xóa màu khi phần tử được di chuyển ra khỏi mục tiêu.

Để tìm hiểu về Kéo và Thả, hãy đọc Hướng dẫn HTML của chúng tôi về Kéo và Thả HTML5 .

Mẹo: Các liên kết và hình ảnh có thể kéo theo mặc định và không cần thuộc tính có thể kéo.

Có nhiều thuộc tính sự kiện được sử dụng và có thể xảy ra trong các giai đoạn khác nhau của thao tác kéo và thả:

  • Các sự kiện được kích hoạt trên mục tiêu có thể kéo (phần tử nguồn) :
    • ondragstart - kích hoạt khi người dùng bắt đầu kéo một phần tử
    • ondrag - kích hoạt khi một phần tử đang được kéo
    • ondragend - kích hoạt khi người dùng kéo xong phần tử

  • Các sự kiện được kích hoạt trên mục tiêu thả:
    • ondragenter - kích hoạt khi phần tử được kéo đi vào mục tiêu thả
    • ondragover - kích hoạt khi phần tử được kéo vượt quá mục tiêu thả
    • ondragleave - kích hoạt khi phần tử được kéo rời khỏi mục tiêu thả
    • ondrop - kích hoạt khi phần tử kéo được thả trên mục tiêu thả

Áp dụng đối với

Thuộc tính ondragleave là một phần của Thuộc tính sự kiện và có thể được sử dụng trên bất kỳ phần tử HTML nào.

Các yếu tố Biến cố
Tất cả các phần tử HTML ondragleave

Thí dụ

Ví dụ Div

Thực thi JavaScript khi phần tử có thể kéo được di chuyển ra khỏi mục tiêu thả:

<div ondragleave="myFunction(event)"></div>

Hỗ trợ trình duyệt

Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính sự kiện.

Event Attribute
ondragleave 4.0 9.0 3.5 6.0 12.0