CODEWITHSUNDEEP
javascripthtmldrag-and-dropdraggable
user6928264
user6928264

Reputation:

Drag and Drop Replace Images

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");
	if (ev.target.hasChildNodes()) {
		alert("This already contains a image");
	}
	else
	{
		ev.target.appendChild(document.getElementById(data));
	}
    
}
<!DOCTYPE html>
<html>

<head>
	<title>PUZZLE</title>
	<link rel="stylesheet" href="puzzletest.css">
	<script  type="text/javascript" src="puzzletest.js"></script>
</head>

<body>


	  <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
		<img id="drag2" src="puzzle12.jpeg" draggable="true" ondragstart="drag(event)" width="336" height="69">
	  </div>

		<img id="drag1" src="puzzle01.jpeg" draggable="true"ondragstart="drag(event)" width="336" height="69">

	 
</body>

</html>

Current HTML

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
  <img id="drag2" src="puzzle12.jpeg" draggable="true" ondragstart="drag(event)" width="336" height="69">
</div>

<img id="drag1" src="puzzle01.jpeg" draggable="true" ondragstart="drag(event)" width="336" height="69">

How can I check if the division already contains an image and if it does it should replace the image with the draggable image or print an alert?

As you can see if I put one Image to the other one disappears try it out

Upvotes: 0

Views: 893

Answers (1)

Mosh Feu
Mosh Feu

Reputation: 29249

The problem is withev.target.hasChildNodes() - the target is the #drag2 but you need the div, so use currentTarget instead.

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");
  if (ev.currentTarget.hasChildNodes()) {
    alert("This already contains a image");
  }
  else
  {
    ev.target.appendChild(document.getElementById(data));
  }

}
<!DOCTYPE html>
<html>

  <head>
    <title>PUZZLE</title>
    <link rel="stylesheet" href="puzzletest.css">
    <script  type="text/javascript" src="puzzletest.js"></script>
  </head>

  <body>


    <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
      <img id="drag2" src="puzzle12.jpeg" draggable="true" ondragstart="drag(event)" width="336" height="69">
    </div>

    <img id="drag1" src="puzzle01.jpeg" draggable="true"ondragstart="drag(event)" width="336" height="69">


  </body>

</html>

Upvotes: 1

Related Questions