JSFiddle - React, Tailwind, and code Playground

by arawn45

HTML

<!DOCTYPE HTML>
<html>
<head>


</head>
<body>

<h2>Drag and Drop</h2>
<p>Drag the image back and forth between the two div elements.</p>

<div  class="div1 border"  id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
  <img src="https://davidwalsh.name/demo/html5-buttons.png" draggable="true" ondragstart="drag(event)" ondragend="dragEndHandler(event)" name="drag1"  id="drag1" width="88" height="31">
</div>

<div  class="div1 border" id="div2" name="div2" ondrop="drop(event)" ondragover="allowDrop(event)">
<img src="https://davidwalsh.name/demo/html5-buttons.png" draggable="true" ondragstart="drag(event)" name="drag2" id="drag2" width="88" height="31">
</div>
<div  class="div1 border" id="div3" name="div3" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div  class="div1 border" id="div4" name="div4" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div  class="div1 border" id="div5" name="div5" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<div  class="div1 border"  ondrop="drop(event)" ondragover="allowDrop(event)">
</div>

<div  class="div1 border"  ></div>


<br>
<label>element deplacé : </label><span id="id_span1"></span>
<br>
<label>DIV source : </label><span id="id_span2"></span>
<br>
<label>DIv  destination : </label><span id="id_span3"></span>
<br>
</body>
</html>

CSS

.div1 {
  float: left;
  width: 100px;
  height: 35px;
  margin: 10px;
  padding: 10px;
  border: 1px solid black;
}





.border  {
transition: .5s ease;
}

#div2:hover{

border: 1px solid red;
}

JavaScript

function allowDrop(ev) {
	//alert(ev.target.id);
  ev.preventDefault();
}

function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
  //alert(ev.target.id);
  document.getElementById("id_span2").innerHTML = ev.target.parentNode.id;//    recupere le nom de la div qui expedie l'lement
  document.getElementById("id_span1").innerHTML = ev.target.id;//   recupere le nom de l'element deplacer
}

function dragEndHandler(event) {
 //alert('445');	
//event.target.parentNode.removeChild(event.target);	
    if (event.dataTransfer.dropEffect == 'move') {
      // remove the dragged element
	 
      
    }
}
	

function drop(ev) {
  
  var data = ev.dataTransfer.getData("text");
  //alert(data);
  //alert(ev.target.id);
  document.getElementById("id_span3").innerHTML = ev.target.id;//   recupere le nom de l'element qui recoit
  
  var parg1 = document.getElementById(ev.target.id);
  if (parg1.hasChildNodes()){

	  //alert('non vide');
	  //ev.stopPropagation();
	  //event.target.parentNode.removeChild(event.target);
	  }
//document.getElementById("div3") = document.getElementById("div1");  
//document.getElementById("div1").innerHTML ="";
		
	  ev.preventDefault();
	  ev.target.appendChild(document.getElementById(data));
	  
}