Kéo thả file JavaScript với 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 và xóa các mục bằng chuột. Cho phép người dùng nhấn giữ chuột trên một phần tử, kéo đến vị trí khác và thả ra.

Ví dụ kéo thả:

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      #boxA, #boxB {float:left;padding:10px;margin:10px; -moz-user-select:none;}
      #boxA { background-color: #6633FF; width:75px; height:75px; }
      #boxB { background-color: #FF6699; width:150px; height:150px; }
    </style>
    <script>
      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>Drag and drop HTML5 demo</h2>
      <div>Try to drag the purple box around.</div>
      <div id="boxA" draggable="true" ondragstart="return dragStart(ev)">
        <p>Drag Me</p>
      </div>
      <div id="boxB">Dustbin</div>
    </center>
  </body>
</html>