Xin chào các bạn, bài 21 trong series học HTML5, chúng ta sẽ tìm hiểu về kỹ thuật kéo thả trong HTML5.
Kéo và thả trong HTML5
Việc kéo thả nghĩa là thực hiện drag và drop các phần tử trong HTML5, học cách sử dụng các hàm API xử lý drag và drop.
Kích hoạt phần tử có thể kéo – thả
Tính năng kéo thả có thể áp dụng cho mọi phần tử HTML, mục đích để dịch chuyển phần tử tử vị trí này sang vị trí khác hay để thu thập dữ liệu.
Phần tử nào muốn có khả năng kéo (drag) đơn giản thêm vào phần tử đó thuộc tính: draggable="true"
Ví dụ:
|
1 |
<img draggable="true" /> |
Các hàm API về kéo và thả trong HTML5 dựa trên các hàm về sự kiện.
Kéo cái gì – Drag
Khi một phần tử được kéo, nó sẽ gọi hàm được chỉ ra trong thuộc tính ondragstart="function_name(event)", dữ liệu sự kiện event trong tham số hàm có chứa dữ liệu phần tử được kéo và gọi phương thức event.dataTransfer.setData() để lưu lại.
Ví dụ xây dựng hàm có tên drag(ev) làm nhiệm vụ này:
|
1 2 3 |
function drag(ev) { ev.dataTransfer.setData("text", ev.target.id); } |
Hàm trên cho biết dữ liệu kéo thiết lập là kiểu "text" và trong nó lưu trữ ID của phần tử (divdrag). Có hàm đó rồi có thể áp dụng vào phần tử muốn kéo, ví dụ kích hoạt phần tử div có id là divdrag có khả năng kéo:
|
1 2 3 4 |
<div draggable="true" ondragstart="drag(event)" id="divdrag"> <img src="https://www.google.com.vn/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" draggable="false"/> <p>Logo Google</p> </div> |
Thả vào đâu (drop)
Khi dữ liệu được thả vào một phần tử nào đó, thì sự kiện drop sẽ phát sinh. Mặc định thì dữ liệu hay phần tử này không có phép thả lên phần tử khác. Nên muốn cho phép thả vào một phần tử thì cần gọi phương thức event.preventDefault() thiết lập tại thuộc tính ondragover.
Xây dựng hàm có tên allowDrop dùng để thiết lập cho phép phần tử chấp nhận phần tử khác thả vào:
|
1 2 3 |
function allowDrop(ev) { ev.preventDefault(); } |
Sau khi có hàm allowDrop như trên thì phần tử nào muốn thiết lập cho phép thả vào thì thêm thuộc tính là ondragover="allowDrop(event)". Ví dụ, box sau cho phép thả vào:
|
1 2 3 |
<div id="box" ondragover="allowDrop(event)" style="border:2px solid pink; width: 100%; height: 200px"> </div> |
Xử lý thả phần tử (drop)
Khi dữ liệu thả vào một phần tử, sự kiện thả sẽ diễn ra và nó sẽ gọi hàm thiết lập trong thuộc tính ondrop. Ví dụ xây dựng hàm để xử lý sự kiện này và lấy dữ liệu thả vào:
Giả sử đặt tên hàm là drop, có thể xây dựng hàm như sau:
|
1 2 3 4 5 6 7 8 9 10 11 |
function drop(ev) { //Gọi hàm này để ngăn cản browser xử lý mặc định sự kiện drop (ví dụ mở link) ev.preventDefault(); //Lấy dữ liệu text thả vào - chính là ID phần tử kéo đã lưu ở trên var data = ev.dataTransfer.getData("text"); //Di chuyển phần tử kéo vào phần tử thả ev.target.appendChild(document.getElementById(data)); } |
Sau khi có hàm drop thiết lập phần tử với thuộc tính ondrop dạng như sau:
|
1 2 3 4 |
<div id="box" ondrop="drop(event)" ondragover="allowDrop(event)" </div> |
Kết hợp toàn bộ mã kéo thả
Toàn bộ các đoạn code về kéo thả trên bạn có thể kế hợp lại để chúng hoạt động chính xác thành một nội dung như sau:
Giờ chạy code trên, bạn đã có thể kéo thẻ div có chứa logo ảnh vào id box rồi.
Kết luận
Xong rồi, đây là một kỹ năng tương đối khó trong HTML5, đòi hỏi các bạn phải có cả kiến thức về Javascript nữa. Nhưng cũng là 1 chủ đề nên học đúng không nào.
Chúc các bạn học tập tốt!
