Drag and Drop Event Test

Test how and when the drag and drop events will fire.

by lotabout

HTML

<div id='container'>
  <div id="source" class="element" draggable="true">
    Source Element
  </div>
  <div id="intermediate" class="element">
    Intermediate Element
  </div>
  <div id="target" class="element">
    Target Element
  </div>
</div>
<div id="log">
</div>

CSS

#container {
  display: flex;
  justify-content: space-between;
}

.element {
  border: 1px solid #666;
  background: #f5f5f5;
  height: 150px;
  width: 150px;
  text-align: center;
}

JavaScript

function reportEvent(element, eventName) {
  element.addEventListener(eventName, () => {
    console.log(`${element.id}: ${eventName} fired`)
  })
}

function attachReportListener(element) {
  reportEvent(element, 'dragstart');
  reportEvent(element, 'dragenter');
  reportEvent(element, 'dragover');
  reportEvent(element, 'dragleave');
  reportEvent(element, 'drop');
  reportEvent(element, 'dragend');
  reportEvent(element, 'dragexit');
  reportEvent(element, 'drag');
}

const source = document.getElementById('source')
const intermediate = document.getElementById('intermediate')
const target = document.getElementById('target')

attachReportListener(source)
attachReportListener(intermediate)
attachReportListener(target)


Array.from([intermediate, target]).forEach((element) => {
  element.addEventListener('dragover', (ev) => {
    ev.preventDefault();
    return false;
  });

  element.addEventListener('drop', (ev) => {
    ev.preventDefault();
    return false;
  });
});

source.addEventListener('dragstart', (ev) => {
  ev.dataTransfer.setData('text/plain',null)
});