การดำเนินการสคริปต์เมื่อลากองค์ประกอบไปยังเป้าหมายปล่อยที่ถูกต้องใน HTML

เมื่อองค์ประกอบถูกลากไปยังเป้าหมายปล่อย (Drop Target) ที่ถูกต้องใน HTML เหตุการณ์ ondragenter จะถูกกระตุ้น

ตัวอย่าง

ลองรันโค้ดต่อไปนี้เพื่อใช้งานแอตทริบิวต์ ondragenter:

<!DOCTYPE HTML>
<html>
  <head>
    <style type="text/css">
      #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; }
      #boxB.drag-over { background-color: #ff99aa; border: 3px dashed #fff; }
    </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) {
        ev.preventDefault(); // จำเป็นสำหรับอนุญาต drop
        ev.target.classList.add('drag-over');
      }
      
      function dragLeave(ev) {
        ev.target.classList.remove('drag-over');
      }
      
      function drop(ev) {
        ev.preventDefault();
        ev.target.classList.remove('drag-over');
        const data = ev.dataTransfer.getData("Text");
        ev.target.appendChild(document.getElementById(data));
      }
    </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(event)">
        <p>Drag Me</p>
      </div>
      <div id="boxB" ondragenter="dragEnter(event)" 
                    ondragleave="dragLeave(event)" 
                    ondrop="drop(event)">Drop Zone</div>
    </center>
  </body>
</html>

Drag and Drop Events ลำดับ

1. dragstart - เริ่มลาก (บนองค์ประกอบที่ลาก)
2. drag - กำลังลาก (เกิดซ้ำๆ)
3. dragenter - เข้าพื้นที่ Drop Target
4. dragover - อยู่ในพื้นที่ Drop Target (เกิดซ้ำๆ) ต้อง preventDefault()
5. dragleave - ออกจากพื้นที่ Drop Target
6. drop - ปล่อยใน Drop Target ต้อง preventDefault()
7. dragend - จบการลาก (บนองค์ประกอบที่ลาก)

DataTransfer Object

// ตั้งค่าข้อมูลเมื่อเริ่มลาก
ev.dataTransfer.setData('text/plain', 'Some data');
ev.dataTransfer.setData('text/uri-list', 'https://example.com');
ev.dataTransfer.setData('application/json', JSON.stringify({id: 1}));

// อ่านข้อมูลเมื่อ drop
const text = ev.dataTransfer.getData('text/plain');
const url = ev.dataTransfer.getData('text/uri-list');
const json = JSON.parse(ev.dataTransfer.getData('application/json'));

// Effect
ev.dataTransfer.effectAllowed = 'copy'; // copy, move, link, copyMove, copyLink, moveLink, all, none
ev.dataTransfer.dropEffect = 'move'; // ตั้งใน dragover/drop

Files Drag & Drop

<div id="dropZone" ondragover="preventDefault(event)" 
                    ondrop="handleDrop(event)">
  Drop files here
</div>

<script>
function preventDefault(e) { e.preventDefault(); }

function handleDrop(e) {
  e.preventDefault();
  const files = e.dataTransfer.files; // FileList
  for (let file of files) {
    console.log(file.name, file.type, file.size);
    // Upload with fetch/FormData
  }
}
</script>

ทำให้องค์ประกอบลากได้

<div draggable="true">Draggable</div>
<img draggable="true" src="..."> <!-- รูปลากได้โดยค่าเริ่มต้น -->
<a href="..." draggable="true">Link</a> <-- ลิงก์ลากได้โดยค่าเริ่มต้น -->