Tính năng kéo thả trong HTML5 - Fedu

CHÀO MỪNG BẠN ĐẾN VỚI THƯ VIỆN HỌC TẬP & ĐÀO TẠO CƠ BẢN

Tính năng kéo thả trong HTML5

HTML5

Hướng dẫn HTML

Biểu mẫu HTML

Đồ họa HTML

Phương tiện ghi HTML

HTML APIs

Tài nguyên HTML

Kéo và thả là một tính năng rất phổ biến. Đó là khi bạn “lấy” một đối tượng và kéo nó vào một vị trí khác. Trong HTML5, kéo và thả là một phần của tiêu chuẩn: bất kỳ phần tử nào cũng có thể kéo được.

Trình duyệt hỗ trợ

Các số trong bảng xác định phiên bản trình duyệt đầu tiên hỗ trợ Kéo và Thả.

Ví dụ tính năng kéo thả trong HTML5

Dưới đây là một ví dụ kéo và thả đơn giản:

<!DOCTYPE HTML>
<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>

Nhìn thì có vẻ phức tạp nhưng ví dụ trên biểu diễn môt thao tác kéo thả đơn giản trong HTML5.

Tạo một phần tử Draggable

Trước hết: để tạo ra một phần tử draggable, thiết lập thuộc tính draggable thành true:

<img draggable=”true”>

Kéo cái gì – ondragstart và setData ()

Sau đó, chỉ đị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, kéo (sự kiện), xác định dữ liệu phải được kéo.

Phương thức dataTransfer.setData () thiết lập kiểu 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, kiểu dữ liệu là “văn bản” và giá trị là id của phần tử có thể kéo được (“drag1”).

Thả ở đâu – ondragover

Sự kiện ondragover xác định nơi mà dữ liệu được thả sau khi kéo.

Theo mặc định, dữ liệu / phần tử không thể bị bỏ trong 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 hành động thả – ondrop

Khi dữ liệu bị rớt xuống, một sự kiện thả xảy ra. Trong ví dụ sau, thuộc tính ondrop gọi hàm, thả (sự kiện):

function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData(“text”);
ev.target.appendChild(document.getElementById(data));
}

Giải thích đoạn mã trên:

  • Gọi preventDefault () để ngăn việc xử lý mặc định trình duyệt của dữ liệu (mặc định là mở dưới dạng liên kết khi thả)
  • Lấy dữ liệu được kéo bằng phương thức dataTransfer.getData (). Phương pháp này sẽ trả lại bất kỳ dữ liệu nào đã được thiết lập cho cùng một 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”)
  • Nối phần tử đã được kéo vào phần tử thả