Kéo và Thả
Kéo và thả là một tính năng rất phổ biến. Đó là khi bạn "nắm" một đối tượng và kéo nó đến một vị trí khác.
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 đủ Kéo và Thả.
| API | Chrome | Edge | FireFox | Safari | Opera |
| Kéo và thả | 4.0 | 9.0 | 3.5 | 6.0 | 12.0 |
Ví dụ HTML Kéo và Thả
<!DOCTYPE HTML> <head> <script> function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("text", ev.target.id); } function drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("text"); ev.target.appendChild(document.getElementById(data)); } </script> </head> <body> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69"> </body></html>Có vẻ phức tạp, nhưng hãy đi qua tất cả các phần khác nhau của một sự kiện kéo và thả.
Làm Cho Một Phần Tử Có Thể Kéo
Đầu tiên: Để làm cho một phần tử có thể kéo, đặt thuộc tính draggable thành true:
Đối Tượng Kéo - ondragstart và setData()
Sau đó, xác định điều gì sẽ xảy ra khi phần tử bị kéo.
Trong ví dụ trên, thuộc tính ondragstart gọi một hàm, drag(event), xác định dữ liệu cần được kéo.
Phương thức dataTransfer.setData() đặt loại dữ liệu và giá trị của dữ liệu được kéo:
function drag(ev) { ev.dataTransfer.setData("text", ev.target.id);}Trong trường hợp này, loại dữ liệu là "text" và giá trị là id của phần tử có thể kéo ("drag1").
Nơi để Thả - ondragover
Sự kiện ondragover xác định nơi dữ liệu kéo có thể được thả.
Mặc định, dữ liệu/phần tử không thể được thả vào các phần tử khác. Để cho phép thả, chúng ta phải ngăn chặn xử lý mặc định của phần tử.
Điều này được thực hiện bằng cách gọi phương thức event.preventDefault() cho sự kiện ondragover:
event.preventDefault();Thực Hiện Thả - ondrop
Khi dữ liệu kéo được thả, một sự kiện thả xảy ra.
Trong ví dụ trên, thuộc tính ondrop gọi một hàm, drop(event):
function drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("text"); ev.target.appendChild(document.getElementById(data));}Mã được giải thích:
- Gọi preventDefault() để ngăn trình duyệt xử lý mặc định của dữ liệu (mặc định là mở như liên kết khi thả)
- Lấy dữ liệu được kéo với phương thức dataTransfer.getData(). Phương thức này sẽ trả về bất kỳ dữ liệu nào được đặt cùng loại trong phương thức setData()
- Dữ liệu được kéo là id của phần tử được kéo ("drag1")
- Gắn phần tử được kéo vào phần tử thả