Site icon T4Tutorials.com

Code to Drag and drop one div into another in Javascript JQuery, HTML CSS

Drag and drop one div into another in Javascript JQuery, HTML CSS.

<html>

<head>
<style>
div#container {
    width: 90%;
    border: 1px solid #000;
    text-align: center;
}
div.split2 div {
    float: left;
    width: 50%;
}

</style>
</head>

<body>
<div id="container">
<div class="split2">
<div>
<table id="std_Table" style="color:green" border="solid 1px color:#cece1e;position:absolute;"   bgcolor="white" height="100" width="50" 
ondrop="drop(event)" ondragover="allowDrop(event)">
<tr>
<td colspan="2"  align="center" bgcolor="green"> <font color="white">STUDENT</font> </td>
</tr>
<tbody>
</tbody>	
</table>


<table id="ad_Table" style="color:green" border="solid 1px color:#cece1e;position:absolute;"   bgcolor="white" height="100" width="50" 
ondrop="drop(event)" ondragover="allowDrop(event)">
<tr>
<td colspan="2"  align="center" bgcolor="green"> <font color="white">ADMIN</font> </td>

</tr>
<tbody>
</tbody>	
</table>
<table id="tech_Table" style="color:green" border="solid 1px color:#cece1e;position:absolute;"   bgcolor="white" height="100" width="50" 
ondrop="drop(event)" ondragover="allowDrop(event)">
<tr>
<td colspan="2"  align="center" bgcolor="green"> <font color="white">TEACHER</font> </td>

</tr>
<tbody>
</tbody>	
</table>

<br>
<div align="left">
<h4>TEXT FOR DRAG AND DROP</h4>
<ul>
<li><div id="std_ad_tech_id" ondragstart="dragStart(event)" draggable="true">ID</div></li>

<li><div id="std_ad_tech_name" ondragstart="dragStart(event)" draggable="true">Name</div></li>

<li><div id="std_ad_tech_cnic" ondragstart="dragStart(event)" draggable="true">CNIC</div></li>

<!-- <li><div id="ad_tech_gender" ondragstart="dragStart(event)" draggable="true">Gender</div></li> -->
</ul>
</div>
</div>
<div  id="ERD" style="display:none;background-color:green;height:500px;align:center">
<br> 
</div>
</div>
</div>

<script>


function dragStart(event) {

    event.dataTransfer.setData("Text", event.target.id);
    
}

function allowDrop(event) {

     event.preventDefault();
}

function dropTable(event) {
 
 var source=event.dataTransfer.getData("Text");
 var destination=event.currentTarget.id;
 
  <!-- left side id -->
 alert(source);
 <!-- Right side id -->
 alert(destination);

  document.getElementById(source).setAttribute("margin-top", "176px");
  
	var sourceSP = source.split("_");
	var destinationSP = destination.split("_");
    var flag=false;
		 for(var i=0; i < sourceSP.length;i++)
		 {
				if(sourceSP[i]==destinationSP[0])
				{
					event.currentTarget.appendChild(document.getElementById(source));
					flag=true;
				}
		  }
		  
		  if(flag==true)
		  {
		  <!-- increase score -->
		  }
		  else
		  {
		  }
		  
 }

function drop(event) {
 
 var source=event.dataTransfer.getData("Text");
 var destination=event.currentTarget.id;
 
 
 var sourceSP = source.split("_");
 var destinationSP = destination.split("_");
 
 for(var i=0; i < sourceSP.length;i++)
 {
		if(sourceSP[i]==destinationSP[0])
		{
		
					var flag=false;
					var tableId=sourceSP[i]+'_Table';
					var tablestd=document.getElementById(tableId).getElementsByTagName('tbody')[0];
						
								
					for(var j=0;j<tablestd.rows.length;j++)
					{
					  var text=tablestd.children[j].innerText;
					  if(text==document.getElementById(source).textContent)
					  {
						flag=true;
					  }
					}

					if(flag==false)
					{
						var newRow=tablestd.insertRow(tablestd.rows.length);
						var newCell=newRow.insertCell(0);
						var newText=document.createTextNode(document.getElementById(source).textContent);
						newCell.appendChild(newText);
					}

		}

 }
 
	var stdCount=getRowsCount('std_Table');
	var adCount=getRowsCount('ad_Table');
	var techCount=getRowsCount('tech_Table');

	   if(stdCount == 4 && adCount == 4 && techCount == 4)
	   {
	   
	   
				document.getElementById('std_Table').removeAttribute("ondrop");
				document.getElementById('std_Table').removeAttribute("ondragover");
				
				document.getElementById('ad_Table').removeAttribute("ondrop");
				document.getElementById('ad_Table').removeAttribute("ondragover");
				
				document.getElementById('tech_Table').removeAttribute("ondrop");
				document.getElementById('tech_Table').removeAttribute("ondragover");
	   
				 document.getElementById('ERD').setAttribute("ondrop", "dropTable(event)");
				 document.getElementById('ERD').setAttribute("ondragover", "allowDrop(event)");
				 
				 document.getElementById('ERD').style.display = "block";
				 
				 document.getElementById('std_Table').setAttribute("ondragstart", "dragStart(event)");
				 document.getElementById('std_Table').setAttribute("draggable", "true");
				 
				 document.getElementById('ad_Table').setAttribute("ondragstart", "dragStart(event)");
				 document.getElementById('ad_Table').setAttribute("draggable", "true");
				 
				 document.getElementById('tech_Table').setAttribute("ondragstart", "dragStart(event)");
				 document.getElementById('tech_Table').setAttribute("draggable", "true");
	   }
}

 function getRowsCount(tableId)
 {
 		var tablestd=document.getElementById(tableId).getElementsByTagName('tbody')[0];
		var count=tablestd.rows.length;
				return count;
 }
 
 
</script>
</body>
</html>

Download Code to Drag and drop one div into another in Javascript JQuery, HTML CSS

Exit mobile version