Kéo và Thả (DnD) là khái niệm giao diện người dùng mạnh mẽ giúp dễ dàng sao chép, sắp xếp lại và xóa các mục với sự trợ giúp của các cú nhấp chuột. Điều này cho phép người dùng nhấp và giữ nút chuột trên một phần tử, kéo phần tử đó đến một vị trí khác và thả nút chuột để thả phần tử đó vào đó.
Để đạt được chức năng kéo và thả với HTML4 truyền thống, các nhà phát triển sẽ phải sử dụng lập trình Javascript phức tạp hoặc các khung Javascript khác như jQuery, v.v.
Giờ đây, HTML 5 đã ra mắt API Kéo và Thả (DnD) mang đến hỗ trợ DnD nguyên bản cho trình duyệt, giúp việc viết mã dễ dàng hơn nhiều.
Cách triển khai kéo và thả
Để thực hiện kéo và thả, bạn cần thực hiện theo quy trình hai bước.
Bước 1 - Tạo một đối tượng có thể kéo được
Để triển khai tính năng kéo và thả trong HTML5, trước tiên, bạn cần làm cho đối tượng có thể kéo được,
Nếu bạn muốn kéo một phần tử, bạn cần đặt thuộc tính có thể kéo thành true cho phần tử đó. Đặt trình xử lý sự kiện cho dragstart lưu trữ dữ liệu đang được kéo. Khởi động kéo của trình xử lý sự kiện sẽ đặt các hiệu ứng được phép (sao chép, di chuyển, liên kết hoặc một số kết hợp).
Ví dụ
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#boxA, #boxB {
float:left;padding:10px;margin:10px; -moz-user-select:none;
}
#boxA { background-color: #50B948; width:75px; height:75px; }
#boxB { background-color: #0000FF; width:150px; height:150px; }
</style>
<script type="text/javascript">
function dragStart(ev) {
ev.dataTransfer.effectAllowed='move';
ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));
ev.dataTransfer.setDragImage(ev.target,0,0);
return true;
}
</script>
</head>
<body>
<center>
<h2>Drag and drop in HTML5</h2>
<div>Try to drag the green box around.</div>
<div id="boxA" draggable="true"
ondragstart="return dragStart(ev)">
<p>Drag Me</p>
</div>
<div id="boxB">Dustbin</div>
</center>
</body>
</html> Bước 2 - Bỏ đối tượng
Để chấp nhận giảm, mục tiêu giảm phải lắng nghe ít nhất ba sự kiện.
Sự kiện dragenter được sử dụng để xác định xem mục tiêu giảm có chấp nhận thả hay không. Nếu việc giảm điểm được chấp nhận, thì sự kiện này phải được hủy bỏ. Sự kiện dragover, được sử dụng để xác định phản hồi nào sẽ được hiển thị cho người dùng.
Đây là cách bạn có thể thả một lần đối tượng này sang một đối tượng khác
Ví dụ
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#boxA, #boxB {
float:left;padding:10px;margin:10px;-moz-user-select:none;
}
#boxA { background-color: #50B948; width:75px; height:75px; }
#boxB { background-color: #0000FF; width:150px; height:150px; }
</style>
<script type="text/javascript">
function dragStart(ev) {
ev.dataTransfer.effectAllowed='move';
ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));
ev.dataTransfer.setDragImage(ev.target,0,0);
return true;
}
function dragEnter(ev) {
event.preventDefault();
return true;
}
function dragOver(ev) {
return false;
}
function dragDrop(ev) {
var src = ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(src));
ev.stopPropagation();
return false;
}
</script>
</head>
<body>
<center>
<h2>Drag and drop in HTML5</h2>
<div>Try to move the green box into the blue box.</div>
<div id="boxA" draggable="true"
ondragstart="return dragStart(ev)">
<p>Drag Me</p>
</div>
<div id="boxB" ondragenter="return dragEnter(ev)"
ondrop="return dragDrop(ev)"
ondragover="return dragOver(ev)">Dustbin
</div>
</center>
</body>
</html>