jQuery toggleClass example

Toggle class name on click in jQuery

by Dhanck

HTML

<div class="container">
  <div class="cont1" ondrop="drop(event)" ondragover="allowDrop(event)">a</div>
  <div class="cont2" ondrop="drop(event)" ondragover="allowDrop(event)">s</div>
  <div class="cont3" ondrop="drop(event)" ondragover="allowDrop(event)">d</div>
  <div class="cont4" ondrop="drop(event)" ondragover="allowDrop(event)">f</div>
</div>
<div class="" draggable="true" ondragstart="drag(event)" id="">
<div draggable="true" ondragstart="drag(event)" id="drag1"0>Dan</div>
</div>

CSS

html, body{
  margin:0;
}
.container{
  display: flex;
  box-sizing: border-box;
}
.cont1, .cont2, .cont3, .cont4{
  width:25%;
  border: 1px solid #cecece;
  height: 70vh;
}

JavaScript

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");
  ev.target.appendChild(document.getElementById(data));
}