Thuộc tính sự kiện ondrag HTML

❮ Thuộc tính sự kiện HTML

Thí dụ

Thực thi JavaScript khi một phần tử <p> đang được kéo:

<p draggable="true" ondrag="myFunction(event)">Drag me!</p>

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

Thuộc tính ondrag kích hoạt khi phần tử hoặc vùng chọn văn bản đang được kéo.

Kéo và thả là một tính năng rất phổ biến trong HTML5. Đó là khi bạn "lấy" một đối tượng và kéo nó đến một vị trí khác. Để biết thêm thông tin, hãy xem Hướng dẫn HTML của chúng tôi về Kéo và thả HTML5 .

Lưu ý: Để làm cho một phần tử có thể kéo, hãy sử dụng thuộc tính có thể kéo HTML5 chung .

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ả

Lưu ý: Trong khi kéo một phần tử, sự kiện ondrag sẽ kích hoạt 350 mili giây một lần.


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
ondrag 4.0 9.0 3.5 6.0 12.0

Cú pháp

<element ondrag="script">

Giá trị thuộc tính

Value Description
script The script to be run on ondrag

Chi tiết kỹ thuật

Các thẻ HTML được hỗ trợ: TẤT CẢ các phần tử HTML

Các trang liên quan

Hướng dẫn HTML: Kéo và thả HTML5

Tham chiếu HTML: Thuộc tính có thể kéo HTML

Tham chiếu DOM HTML: Sự kiện ondrag


❮ Thuộc tính sự kiện HTML