fixtures/drag.html

<!-- Copied from https://developer.mozilla.org/en-US/docs/Web/API/Document/drag_event -->

<html>
  <style>
    #draggable {
      width: 200px;
      height: 20px;
      text-align: center;
      background: white;
    }

    .dropzone {
      width: 200px;
      height: 20px;
      background: blueviolet;
      margin-bottom: 10px;
      padding: 10px;
    }
  </style>

  <body>
    <div class="dropzone">
      <div
        id="draggable"
        draggable="true"
        ondragstart="event.dataTransfer.setData('text/plain',null)"
      >
        This div is draggable
      </div>
    </div>
    <div class="dropzone"></div>
  </body>

  <script>
    window.dragTrack = ''

    document.onmousedown = (e) => {
      window.dragTrack += ' down ' + e.clientX + ' ' + e.clientY
    }

    document.onmousemove = (e) => {
      if (e.clientX === 0 && e.clientY === 0) return
      window.dragTrack += ' move ' + e.clientX + ' ' + e.clientY
    }

    document.onmouseup = (e) => {
      window.dragTrack += ' up ' + e.clientX + ' ' + e.clientY
    }

    var dragged

    /* events fired on the draggable target */
    document.addEventListener('drag', function () {}, false)

    document.addEventListener(
      'dragstart',
      function (event) {
        // store a ref. on the dragged elem
        dragged = event.target
        // make it half transparent
        event.target.style.opacity = 0.5
      },
      false
    )

    document.addEventListener(
      'dragend',
      function (event) {
        // reset the transparency
        event.target.style.opacity = ''
      },
      false
    )

    /* events fired on the drop targets */
    document.addEventListener(
      'dragover',
      function (event) {
        // prevent default to allow drop
        event.preventDefault()
      },
      false
    )

    document.addEventListener(
      'dragenter',
      function (event) {
        // highlight potential drop target when the draggable element enters it
        if (event.target.className === 'dropzone') {
          event.target.style.background = 'purple'
        }
      },
      false
    )

    document.addEventListener(
      'dragleave',
      function (event) {
        // reset background of potential drop target when the draggable element leaves it
        if (event.target.className === 'dropzone') {
          event.target.style.background = ''
        }
      },
      false
    )

    document.addEventListener(
      'drop',
      function (event) {
        // prevent default action (open as link for some elements)
        event.preventDefault()
        // move dragged elem to the selected drop target
        if (event.target.className === 'dropzone') {
          event.target.style.background = ''
          dragged.parentNode.removeChild(dragged)
          event.target.appendChild(dragged)
        }
      },
      false
    )
  </script>
</html>