19/09/2018, 14:43
draggable trong HTML
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 < ! DOCTYPE HTML > < html > < head > <style> #div1 ...
|
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 |
<!DOCTYPE HTML> <html> <head> <style> #div1 { awidth: 350px; height: 70px; padding: 10px; border: 1px solid #aaaaaa; } </style> <script> function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("Text", ev.target.id); } function drop(ev) { var data = ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); ev.preventDefault(); } </script> </head> <body> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <br> <p id="drag1" draggable="true" ondragstart="drag(event)">Đoạn văn bản này có thể di chuyển được. Nhấn chuột và di chuyển đoạn này vào khung trên.</p> </body> </html> |
Demo
Định nghĩa và cách sử dụng
Thuộc tính draggable quy định thẻ có thể di chuyển hay không.
Mẹo: Theo mặc định, liên kết và ảnh là hai thẻ có thể di chuyển.
Mẹo: Thuộc tính draggable thường được sử dụng trong thao tác kéo-thả. Bạn có thể đọc bài về kéo-thả để biết thêm chi tiết.
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 |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| draggable | 4.0 | 3.5 | 9.0 | 6.0 | 12.0 |
Khác biệt giữa HTML 4.01 và HTML5
draggable là thuộc tính mới trong HTML5.
Cú pháp
|
1 |
<element draggable="true|false|auto"> |
Giá trị thuộc tính
| Giá trị | Miêu tả |
|---|---|
| true | Thẻ có thể di chuyển được. |
| false | Thẻ không thể di chuyển. |
| auto | Để trình duyệt quyết định. |
