Sự kiện ondragover
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 < ! DOCTYPE HTML > < html > < head ...
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
<!DOCTYPE HTML> <html> <head> <style> #droptarget { float: left; awidth: 200px; height: 35px; margin: 55px; margin-top: 155px; padding: 10px; border: 1px solid #aaaaaa; } </style> </head> <body> <p ondragstart="dragStart(event)" draggable="true" id="dragtarget">Kéo thẻ này vào khung!</p> <div id="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)"> </div> <p style="clear:both;"><strong>Lưu ý:</strong> các sự kiện kéo thả không hỗ trợ trong Internet Explorer 8 trở về trước và Safari 5.1 trở về trước.</p> <p id="demo"></p> <script> function dragStart(event) { event.dataTransfer.setData("Text", event.target.id); } function allowDrop(event) { event.preventDefault(); document.getElementById("demo").innerHTML = "Thẻ p đang ở trên vùng được thả."; event.target.style.border = "4px dotted green"; } function drop(event) { event.preventDefault(); var data = event.dataTransfer.getData("Text"); event.target.appendChild(document.getElementById(data)); document.getElementById("demo").innerHTML = "Thẻ p đã được thả."; } </script> </body> </html> |
Demo
Định nghĩa và cách sử dụng
Thuộc tính ondragover được kích hoạt khi đối tượng được kéo trên vùng được thả hợp lệ.
Mặc định, dữ liệu/thẻ không thể thả trên một vùng khác. Để cho phép đối tượng thả, bạn sẽ phải thay đổi chế độ mặc định bằng cách gọi phương thức event.preventDefault() trong thuộc tính ondragover.
Kéo và thả là những tính năng rất phổ biến trong HTML5. Để tìm hiểu thêm, bạn có thể xem bài Kéo-Thả trong HTML5.
Lưu ý: Để một thẻ có thể kéo được, bạn phải sử dụng thuộc tính draggable trong HTML5.
Mẹo: Liên kết và ảnh là những thẻ mặc định có thể kéo mà không cần thêm thuộc tính draggable.
Dưới đây là những sự kiện được sử dụng và có thể xảy ra trong các giai đoạn khác nhau của hành động kéo-thả:
– Sự kiện được kích hoạt trên thẻ có thuộc tính draggable (thẻ nguồn):
- ondragstart – kích hoạt khi người dùng bắt đầu kéo thẻ
- ondrag – kích hoạt khi thẻ đang được kéo
- ondragend – kích hoạt khi người dùng thả thẻ ra
– Kích hoạt trên thẻ được thả vào:
- ondragenter – kích hoạt khi thẻ đang được kéo di chuyển vào trong khu vực thả
- ondragover – kích hoạt khi thẻ đang được kéo di chuyển trên khu vực thả
- ondragleave – kích hoạt khi thẻ đang được kéo di chuyển ra ngoài khu vực thả
- ondrop – kích hoạt khi thẻ được thả vào trong
Lưu ý: Khi kéo thẻ, sự kiện ondragover được kích hoạt sau mỗi 350 milli giây (1.000 mili giây = 1 giây).
Trình duyệt hỗ trợ
Số trong bảng dưới đây thể hiện phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ cho thuộc tính.
| Thuộc tính |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| ondragover | 4.0 | 3.5 | 9.0 | 6.0 | 12.0 |
Khác biệt giữa HTML 4.01 và HTML5
ondragover là sự kiện mới trong HTML5.
Cú pháp
|
1 |
<element ondragover="script"> |
Giá trị thuộc tính
| Giá trị | Miêu tả |
|---|---|
| script | Chạy script khi thuộc tính được kích hoạt |
Chi tiết
Thuộc tính được sử dụng trong tất cả các thẻ của HTML.
