drag and drop demo

by Richard Hunter

HTML

<p id="foo" draggable="true">
  This text <strong>may</strong> be dragged.
</p>

<div id="bar" class="bar"></div>

CSS

.bar {
  width:100px;
  height:100px;
  background: green;
}

.bar.drag {
  background: orange;
}

JavaScript

foo.addEventListener('dragstart', (event) => {
	event.dataTransfer.setData('text/plain', 'This text may be dragged')
});

bar.addEventListener('dragenter', (event) => {
  // necessary to get drop event to fire
	event.preventDefault();
  bar.classList.add('drag');
});

bar.addEventListener('dragover', (event) => {
	// necessary to get drop event to fire
	event.preventDefault();
});

bar.addEventListener('drop', (event) => {
	event.preventDefault();
  
  var data = event.dataTransfer.getData("text/plain");
  bar.textContent = bar.textContent + data;
})

bar.addEventListener('dragleave', () => {
	bar.classList.remove('drag');
});

foo.addEventListener('dragend', (event) => {
  // fired on source element. Good place to do some clean up
});