Cách thiết lập hành vi drop (copy/move/link) cho kéo thả trong HTML?

Thuộc tính dropzone trên phần tử đích (drop target) chỉ định hành vi khi thả: copy, move, hoặc link. Tuy nhiên, hiện tại không trình duyệt nào hỗ trợ thuộc tính này (theo spec HTML Living Standard nhưng chưa implement).

Giá trị

• copy: Tạo bản sao phần tử kéo.
• move: Di chuyển phần tử kéo đến vị trí mới.
• link: Tạo liên kết đến dữ liệu kéo.

Cú pháp (chưa hoạt động)

<div dropzone="copy"></div>

Cách hiện tại xử lý kéo thả (Drag and Drop API)

Dùng JavaScript sự kiện:

• draggable="true" trên phần tử kéo
• ondragstart: setData
• ondragover: event.preventDefault() để cho phép drop
• ondrop: getData và xử lý

Ví dụ hoạt động thực tế

<div id="dropzone" style="border:2px dashed #ccc; padding:20px;" ondragover="allowDrop(event)" ondrop="drop(event)">Kéo vào đây</div>
<p draggable="true" ondragstart="drag(event)" id="drag1">Kéo tôi</p>
<script>
  function allowDrop(e) { e.preventDefault(); }
  function drag(e) { e.dataTransfer.setData("text", e.target.id); }
  function drop(e) {
    e.preventDefault();
    var id = e.dataTransfer.getData("text");
    e.target.appendChild(document.getElementById(id));
  }
</script>