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