Kéo và thả trong HTML5
Trong hướng dẫn này, bạn sẽ học cách sử dụng tính năng kéo và thả của HTML5.
Kéo và thả một phần tử
Tính năng kéo và thả của HTML5 cho phép người dùng kéo và thả một phần tử đến một vị trí khác. Vị trí thả có thể là một ứng dụng khác. Trong khi kéo một phần tử, biểu diễn mờ của phần tử sẽ theo con trỏ chuột.
Hãy thử ví dụ sau để hiểu về cơ bản nó hoạt động như thế nào:
Ví dụ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Using Drag and Drop</title>
<script>
function dragStart(e) {
// Sets the operation allowed for a drag source
e.dataTransfer.effectAllowed = "move";
// Sets the value and type of the dragged data
e.dataTransfer.setData("Text", e.target.getAttribute("id"));
}
function dragOver(e) {
// Prevent the browser default handling of the data
e.preventDefault();
e.stopPropagation();
}
function drop(e) {
// Cancel this event for everyone else
e.stopPropagation();
e.preventDefault();
// Retrieve the dragged data by type
var data = e.dataTransfer.getData("Text");
// Append image to the drop box
e.target.appendChild(document.getElementById(data));
}
</script>
<style>
#dropBox {
width: 300px;
height: 300px;
border: 5px dashed gray;
background: lightyellow;
text-align: center;
margin: 20px 0;
color: orange;
}
#dropBox img {
margin: 25px;
}
</style>
</head>
<body>
<h2>Drag and Drop Demo</h2>
<p>Drag and drop the image into the drop box:</p>
<div id="dropBox" ondragover="dragOver(event);" ondrop="drop(event);">
<!--Dropped image will be inserted here-->
</div>
<img src="../images/kites.jpg" id="dragA" draggable="true" ondragstart="dragStart(event);" width="250" height="250" alt="Flying Kites">
</body>
</html>Mẹo: Bạn có thể làm cho một phần tử có thể kéo được bằng cách đặt thuộc tính có thể kéo thành true, chẳng hạn như draggable="true". Tuy nhiên, trong hầu hết các trình duyệt web, các lựa chọn văn bản, hình ảnh và các phần tử liên kết với một thuộc tính href có thể kéo theo mặc định.
Sự kiện kéo và thả
Một số sự kiện được kích hoạt trong các giai đoạn khác nhau của thao tác kéo và thả. Nhưng các sự kiện chuột chẳng hạn như di chuyển chuột không được kích hoạt trong một thao tác kéo.
Bảng sau cung cấp cho bạn tổng quan ngắn gọn về tất cả các sự kiện kéo và thả.
| Biến cố | Sự mô tả |
|---|---|
ondragstart |
Kích hoạt khi người dùng bắt đầu kéo một phần tử. |
ondragenter |
Kích hoạt khi phần tử có thể kéo lần đầu tiên được chuyển vào trình nghe thả. |
ondragover |
Kích hoạt khi người dùng kéo một phần tử qua trình nghe thả. |
ondragleave |
Kích hoạt khi người dùng kéo một phần tử ra khỏi trình nghe thả. |
ondrag |
Kích hoạt khi người dùng kéo một phần tử vào bất kỳ đâu; bắn liên tục nhưng có thể cung cấp tọa độ X và Y của con trỏ chuột. |
ondrop |
Kích hoạt khi người dùng thả thành công một phần tử vào trình nghe thả. |
ondragend |
Kích hoạt khi hành động kéo hoàn tất, cho dù nó có thành công hay không. Sự kiện này không được kích hoạt khi kéo tệp vào trình duyệt từ màn hình. |
Lưu ý: Tính năng kéo và thả của HTML5 được hỗ trợ trong tất cả các trình duyệt hiện đại chính như Firefox, Chrome, Opera, Safari và Internet Explorer 9 trở lên.