Drag and drop

#codepen

Basic drap and drop implementation

js code


const div = document.querySelector('.div_WI');
const dropAreaOne = document.querySelector('.area_2');
const dropAreaTwo = document.querySelector('.area_1');





function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
 let element = document.getElementById(data);
  if(element !== ev.target){
  ev.target.appendChild(element);
  }
}

div.addEventListener('dragstart', drag);
dropAreaOne.addEventListener('drop', drop);
dropAreaOne.addEventListener('dragover', allowDrop);
dropAreaTwo.addEventListener('drop', drop);
dropAreaTwo.addEventListener('dragover', allowDrop);