CODEWITHSUNDEEP
javascriptjquerycsshtmldrag-and-drop
user2406993
user2406993

Reputation: 257

HTML5 Drag and Drop - prevent drop if container already has a child

I'm trying to make a small picture game using HTML5 Drag and Drop, but I am suffering from disappearing items.

If a target div already has a child in it, and I accidentally drop a dragable item onto it, then the dragable disappears. I added the line

if (ev.target.hasChildNodes()) { return; }

as suggested by previous posters with this question, but this only seems to operate on the source row of pictures at the bottom, meaning you can never drag something back onto it (which would be helpful). All i want to stop is more than one item taking up a space in the top div

Any helpful guidance?

My HTML

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

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

function drop(ev)
{
  ev.preventDefault();
  
  if (ev.target.hasChildNodes()) { return; }
  
  var image =ev.dataTransfer.getData("content");
	
  if (ev.target.id == document.getElementById(image).getAttribute('data-div')){ 
	
	  ev.target.appendChild(document.getElementById(image));
	  
	}
  else{
	  ev.target.appendChild(document.getElementById(image));
  }
}
.cubeContainer {
    height: 450px;
    width: 110px;
}
.cubeReceiver {
    height: 210px;
    width: 210px;
}
#div1 {
    width: 100px;
    height: 100px;
    padding: 0px;
    border: 1px solid #aaaaaa;
	float: left;
}
#div2 {
    width: 100px;
    height: 100px;
    padding: 0px;
    border: 1px solid #aaaaaa;
	float: left;
}
#div3 {
    width: 100px;
    height: 100px;
    padding: 0px;
    border: 1px solid #aaaaaa;
	float: left;
}
#div4 {
    width: 100px;
    height: 100px;
    padding: 0px;
    border: 1px solid #aaaaaa;
	float: left;
}
#div5 {
    width: 100px;
    height: 100px;
    padding: 0px;
    border: 1px solid #aaaaaa;
	float: left;
}
#div6 {
    width: 100px;
    height: 100px;
    padding: 0px;
    border: 1px solid #aaaaaa;
	float: left;
}
#div7 {
    width: 100px;
    height: 100px;
    padding: 0px;
    border: 1px solid #aaaaaa;
	float: left;
}
#div8 {
    width: 100px;
    height: 100px;
    padding: 0px;
    border: 1px solid #aaaaaa;
	float: left;
}
#highlight {
		background-color: blue;
	}
#drag1results {
    background-color: #FF0004;
	width: 20px;
	height: 20px;
	border: 1px solid #aaaaaa;
}
#drag2results {
    background-color: #FF0004;
	width: 20px;
	height: 20px;
	border: 1px solid #aaaaaa;
}
#drag3results {
    background-color: #FF0004;
	width: 20px;
	height: 20px;
	border: 1px solid #aaaaaa;
}
#drag4results {
    background-color: #FF0004;
	width: 20px;
	height: 20px;
	border: 1px solid #aaaaaa;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cubeReceiver">
	<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
	<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
	<div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
	<div id="div4" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</div>
	
<div class="cubeContainer" style="width: 450px; height: 110px;">

	<div id="div5" ondrop="drop(event)" ondragover="allowDrop(event)">
	<img id="drag1" src="http://gwydir.demon.co.uk/jo/tess/optical2.gif" draggable="true" ondragstart="drag(event)" width="100" height="100" data-div="div3">
	</div>
  
	<div id="div6" ondrop="drop(event)" ondragover="allowDrop(event)">
	<img id="drag2" src="http://gwydir.demon.co.uk/jo/tess/optical1.gif" draggable="true" ondragstart="drag(event)" width="100" height="100" data-div="div2">
	</div>
  
	<div id="div7" ondrop="drop(event)" ondragover="allowDrop(event)">
	<img id="drag3" src="http://gwydir.demon.co.uk/jo/tess/optical3.gif" draggable="true" ondragstart="drag(event)" width="100" height="100" data-div="div4">
	</div>
  
	<div id="div8" ondrop="drop(event)" ondragover="allowDrop(event)">
	<img id="drag4" src="http://gwydir.demon.co.uk/jo/tess/optical7.gif" draggable="true" ondragstart="drag(event)" width="100" height="100" data-div="div1">
	</div>
	
</div>

Upvotes: 0

Views: 1519

Answers (1)

Muhammet Can TONBUL
Muhammet Can TONBUL

Reputation: 3538

Change 

if (ev.target.hasChildNodes()) { return; }

to

if (ev.target.tagName=="IMG") { return; }

Because when you check the ev.target, ev.target equal the IMG tag not DIV tag.

Upvotes: 1

Related Questions