document.addEventListener('DOMContentLoaded', (event) => {

      function handleDragStart(e) {
        this.style.opacity = '0.4';
        dragSrcEl = this;
        e.dataTransfer.effectAllowed = 'move';
        e.dataTransfer.setData('text/html', this.innerHTML);
      }

      function handleDragEnd(e) {
        this.style.opacity = '1';

        items.forEach(function (item) {
          item.classList.remove('over');
        });
      }

      function handleDragOver(e) {
        e.preventDefault();
        return false;
      }

      function handleDragEnter(e) {
        this.classList.add('over');
      }

      function handleDragLeave(e) {
        this.classList.remove('over');
      }
      
      function handleDrop(e) {
        var shift = (this.title == "shift")
        e.stopPropagation(); // stops the browser from redirecting.
        if (dragSrcEl !== this) {
          if (shift) {
            /* für Bsp. 4 (verschieben) */
            if (isBefore(dragSrcEl, e.target))
              e.target.parentNode.insertBefore(dragSrcEl, e.target);
            else
              e.target.parentNode.insertBefore(dragSrcEl, e.target.nextSibling);
          } else {  
            /* für Bsp. 2 (tauschen) */
            dragSrcEl.innerHTML = this.innerHTML;
            this.innerHTML = e.dataTransfer.getData('text/html');
          }
          //showNewOrder();
        }
        return false;
      }
    });