Chuyển động thả HTML5

Vui lòng kéo ảnh CodeW3C.com vào hình vuông.

Kéo-thả

Kéo-thả (Drag và Drop) là một tính năng rất phổ biến. Nó có nghĩa là bạn kéo một vật và thả nó vào vị trí khác.

Kéo-thả là một phần của tiêu chuẩn HTML5: bất kỳ phần tử nào cũng có thể kéo-thả.

Hỗ trợ trình duyệt

Số trong bảng chỉ ra phiên bản trình duyệt đầu tiên hỗ trợ kéo-thả hoàn toàn.

API
Kéo-thả 4.0 9.0 3.5 6.0 12.0

Ví dụ kéo-thả HTML

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

Ví dụ

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

Thử ngay

Nó có thể có vẻ phức tạp, nhưng hãy cùng nghiên cứu tất cả các phần khác nhau của sự kiện kéo-thả.

Thiết lập phần tử có thể kéo

Trước tiên: Để thiết lập một phần tử có thể kéo, hãy đặt thuộc tính draggable thành true:

<img draggable="true">

Nội dung kéo-thả - ondragstart và setData()

Sau đó, quy định những gì sẽ xảy ra khi phần tử được kéo.

Trong ví dụ trên, thuộc tính ondragstart gọi hàm drag(event) để quy định dữ liệu nào sẽ được kéo.

Phương thức setData() của dataTransfer thiết lập loại dữ liệu và giá trị của dữ liệu có thể kéo:

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}

Trong ví dụ này, loại dữ liệu là "text" và giá trị là id của phần tử có thể kéo ("drag1").

Đặt ở đâu - ondragover

Sự kiện ondragover xác định nơi nào dữ liệu có thể được đặt.

Mặc định, dữ liệu/element không thể được đặt vào element khác. Để thực hiện chức năng kéo thả, chúng ta phải ngăn chặn cách xử lý mặc định này của element.

Việc này được hoàn thành bởi phương thức preventDefault() của sự kiện ondragover:

event.preventDefault();

Thực hiện đặt - ondrop

Sự kiện drop xảy ra khi thả dữ liệu bị kéo.

Trong ví dụ trên, thuộc tính ondrop gọi một hàm, drop(event):

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

Giải thích mã:

  • Gọi preventDefault() để ngăn chặn cách xử lý mặc định của trình duyệt dữ liệu (hành vi mặc định của sự kiện drop là mở liên kết)
  • Nhận dữ liệu bị kéo bằng phương thức getData() của dataTransfer. Phương thức này sẽ trả về bất kỳ dữ liệu nào được thiết lập cùng loại trong phương thức setData()
  • Dữ liệu bị kéo là id của phần tử bị kéo ("drag1")
  • Chèn phần tử bị kéo vào phần tử được đặt

Các ví dụ khác

Di chuyển hình ảnh

Cách di chuyển hình ảnh giữa hai thẻ <div>:

Vui lòng kéo ảnh CodeW3C.com vào hình vuông.

Thử ngay