Cách sử dụng kéo thả (Drag and Drop) trong HTML5

Kéo thả (Drag and Drop - DnD) là khái niệm giao diện người dùng mạnh mẽ, giúp dễ dàng sao chép, sắp xếp lại và xóa các mục bằng chuột. Người dùng nhấp giữ chuột trên một phần tử, kéo đến vị trí khác, rồi thả chuột để thả phần tử đó.

Với HTML4 truyền thống, lập trình viên phải dùng JavaScript phức tạp hoặc framework như jQuery. HTML5 cung cấp API Drag and Drop gốc, hỗ trợ sẵn trong trình duyệt, giúp viết code dễ dàng hơn nhiều.

Cách triển khai kéo thả

Để triển khai kéo thả, bạn cần làm theo quy trình 2 bước.

Bước 1 - Làm cho đối tượng có thể kéo

Để kéo một phần tử, đặt thuộc tính draggable="true" cho phần tử đó. Thiết lập trình lắng nghe sự kiện dragstart để lưu dữ liệu đang được kéo. Trình lắng nghe dragstart sẽ thiết lập các hiệu ứng cho phép (copy, move, link hoặc kết hợp).

Ví dụ Bước 1

<!DOCTYPE HTML>
<html>
  <head>
    <style type="text/css">
      #boxA, #boxB { float:left; padding:10px; margin:10px; -moz-user-select:none; }
      #boxA { background-color: #50B948; width:75px; height:75px; }
      #boxB { background-color: #0000FF; width:150px; height:150px; }
    </style>
    <script type="text/javascript">
      function dragStart(ev) {
        ev.dataTransfer.effectAllowed = 'move';
        ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));
        ev.dataTransfer.setDragImage(ev.target, 0, 0);
        return true;
      }
    </script>
  </head>
  <body>
    <center>
      <h2>Kéo thả trong HTML5</h2>
      <div>Thử kéo hộp xanh lá quanh đây.</div>
      <div id="boxA" draggable="true" ondragstart="return dragStart(event)">
        <p>Kéo tôi</p>
      </div>
      <div id="boxB">Thùng rác</div>
    </center>
  </body>
</html>

Bước 2 - Thả đối tượng

Để chấp nhận thả, mục tiêu thả phải lắng nghe ít nhất ba sự kiện:

• dragenter: Xác định mục tiêu có chấp nhận thả không. Nếu chấp nhận, phải hủy sự kiện này.
• dragover: Xác định phản hồi hiển thị cho người dùng.
• drop: Xử lý khi thả xuống.

Ví dụ Bước 2 (Hoàn chỉnh)

<!DOCTYPE HTML>
<html>
  <head>
    <style type="text/css">
      #boxA, #boxB { float:left; padding:10px; margin:10px; -moz-user-select:none; }
      #boxA { background-color: #50B948; width:75px; height:75px; }
      #boxB { background-color: #0000FF; width:150px; height:150px; }
    </style>
    <script type="text/javascript">
      function dragStart(ev) {
        ev.dataTransfer.effectAllowed = 'move';
        ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));
        ev.dataTransfer.setDragImage(ev.target, 0, 0);
        return true;
      }
      function dragEnter(ev) {
        event.preventDefault();
        return true;
      }
      function dragOver(ev) {
        return false;
      }
      function dragDrop(ev) {
        var src = ev.dataTransfer.getData("Text");
        ev.target.appendChild(document.getElementById(src));
        ev.stopPropagation();
        return false;
      }
    </script>
  </head>
  <body>
    <center>
      <h2>Kéo thả trong HTML5</h2>
      <div>Thử di chuyển hộp xanh lá vào hộp xanh dương.</div>
      <div id="boxA" draggable="true" ondragstart="return dragStart(event)">
        <p>Kéo tôi</p>
      </div>
      <div id="boxB" ondragenter="return dragEnter(event)" ondrop="return dragDrop(event)" ondragover="return dragOver(event)">Thùng rác</div>
    </center>
  </body>
</html>