Kéo và thả API trong HTML - HTML Drag and Drop API

  • Huân

    Tác giả

    Huân

  • Ngày đăng

    30 thg 11, 2023

  • Số lượt xem

    273 lượt xem


Bài học này mô tả cách kéo và thả API trong HTML dành cho người mới học làm quen và hướng dẫn chi tiết cách các và thả các phần tử trong HTML

Kéo và Thả

Kéo và thả là một tính năng rất phổ biến. Đó là khi bạn "nắm" một đối tượng và kéo nó đến một vị trí khác.

Hỗ Trợ Trình Duyệt

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

API

Chrome

Edge

FireFox

Safari

Opera

Kéo và thả

4.0

9.0

3.5

6.0

12.0

Ví dụ HTML Kéo và Thả

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

Có vẻ phức tạp, nhưng hãy đi qua tất cả các phần khác nhau của một sự kiện kéo và thả.

Làm Cho Một Phần Tử Có Thể Kéo

Đầu tiên: Để làm cho một phần tử có thể kéo, đặt thuộc tính draggable thành true:

Đối Tượng Kéo - ondragstart và setData()

Sau đó, xác đị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, drag(event), xác định dữ liệu cần được kéo.

Phương thức dataTransfer.setData() đặt loại 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, loại dữ liệu là "text" và giá trị là id của phần tử có thể kéo ("drag1").

Nơi để Thả - ondragover

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

Mặc định, dữ liệu/phần tử không thể được thả vào 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 Thả - ondrop

Khi dữ liệu kéo được thả, một sự kiện thả xảy ra.

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));
}

Mã được giải thích:

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

Tổng số đánh giá: 0

Xếp hạng: 5 / 5 sao

Danh sách bài học về HTML

Liên Kết Chia Sẻ

Đây là liên kết chia sẻ bới cộng đồng người dùng, chúng tôi không chịu trách nhiệm gì về nội dung của các thông tin này. Nếu có liên kết nào không phù hợp xin hãy báo cho admin.