drag and drop API

by yejin_yang

HTML

<div class='container'>
  <div draggable='true' class='box'>
  A
  </div>
  <div draggable='true' class='box'>
  B
  </div>
    <div draggable='true' class='box'>
  C
  </div>
</div>

CSS

.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.box {
  border: 3px solid #666;
  background-color: #ddd;
  border-radius: .5em;
  padding: 10px;
  cursor: move;
}

.box.over{
  border: 3px dotted #666;
}

JavaScript

document.addEventListener('DOMContentLoaded', function(event){
	let dragSrcEl;
	function dragStartHandler(e){
		e.target.style.opacity = '0.5';
    dragSrcEl = this;
    e.dataTransfer.effectAllowed='move';
    e.dataTransfer.setData('text/html', this.innerHTML);
	}
  
	function dragEnterHandler(e){
  	e.preventDefault();
  	this.classList.add('over');
  }

  
  function dragOverHandler(e) {
     e.preventDefault();
    e.dataTransfer.dropEffect = 'move';
   
  } 
  
  function dragLeaveHandler(e){
  	this.classList.remove('over');
  }
  
  function dropHandler(e){
    e.preventDefault();
    if(dragSrcEl !== this){
      dragSrcEl.innerHTML = this.innerHTML;
      this.innerHTML = e.dataTransfer.getData('text/html');
    }
    return false; 
  }

  function dragEndHandler(e){
    e.target.style.opacity = '1.0';
    items.forEach((item) => item.classList.remove('over'))
  }

  const items = document.querySelectorAll('.box');

  items.forEach(function(item){
  item.addEventListener('dragstart', dragStartHandler, false)
  item.addEventListener('dragend', dragEndHandler, false)
  item.addEventListener('dragenter', dragEnterHandler, false);
  item.addEventListener('dragleave', dragLeaveHandler, false);
  item.addEventListener('drop', dropHandler, false)
  item.addEventListener('dragover', dragOverHandler, false);
  })

})