JavaScript: Elemente per Drag&Drop verschieben

Mit JavaScript lassen sich HTML-Elemente mit der Maus innerhalb eines Dokuments verschieben:

Kartoffel

Tomate

Gurke

Zwiebel

Karotte

Hier der dazugehörige Quelltext:

Code kopieren

<!DOCTYPE html>
<html lang='de'>
  <head>
    <title>Drag&Drop</title>
    <meta charset='UTF-8'>
    <style>
      table { margin:30px auto; border-collapse:collapse; }
      table.dragging td * { pointer-events:none; }
      tr { border-top:2px solid transparent; }
      tr:not(.dummy) { background:hsl(30,85%,30%); }
      tr:not(.dummy):not(.drag):hover { background:hsl(30,85%,35%); }
      tr.drag { background:hsl(30,85%,40%); }
      tr.drop { border-color:yellow; }
      td { padding:10px; color:white; font-size:30px; }
    </style>
  </head>
  <body>
    <table id='table1'>
      <tr><td>Kartoffel</td></tr>
      <tr><td>Tomate</td></tr>
      <tr><td>Gurke</td></tr>
      <tr><td>Zwiebel</td></tr>
      <tr><td>Karotte</td></tr>
      <tr class='dummy'><td></td></tr>  <!-- dient nur als drop target -->
    </table>
    <script>
      function makeDraggable(id) {
        table = document.getElementById(id);
        q = table.querySelectorAll('tr');
        for (i = 0; i < q.length; i++) {
          if (i < q.length - 1) {  // tr.dummy überspringen
            q[i].setAttribute('draggable', 'true');
          }
          q[i].addEventListener('dragstart', (ev) => {
            table.classList.add('dragging');
            source = ev.target;
            if (table.querySelector('.drag')) table.querySelector('.drag').classList.remove('drag');
            ev.target.classList.add('drag');
          });
          q[i].addEventListener('dragenter', (ev) => {
            if (ev.target.parentNode.tagName == 'TR') ev.target.parentNode.classList.add('drop');
          });
          q[i].addEventListener('dragover', (ev) => {
            ev.preventDefault();
          });
          q[i].addEventListener('dragleave', (ev) => {
            if (ev.target.parentNode.tagName == 'TR') ev.target.parentNode.classList.remove('drop');
          });
          q[i].addEventListener('dragend', (ev) => {
            document.getElementById(drag[0]).classList.remove('dragging');
          });
          q[i].addEventListener('drop', (ev) => {
            table.classList.remove('dragging');
            if (source.tagName == 'TR') ev.target.parentNode.parentNode.insertBefore(source, ev.target.parentNode);
            table.style.pointerEvents = 'none';
            // hier können weitere drop-effekte notiert werden
            table.style.pointerEvents = 'all';
            ev.target.parentNode.classList.remove('drop');
          });
        }
      }
      makeDraggable('table1');
    </script>
  </body>
</html>

Weitere Informationen

MDN Web Docs developer.mozilla.org/de/docs/Web/API/HTML_Drag_and_Drop_API: Referenz zur HTML-Drag-and-Drop-API