0

So far I start with one image, and I can drag it to a box and drop it, and it works fine. But I have a button that generates more images and when I drop them on the same thing the original worked with, they do not drop there.

My code:

 var myCount = 1;
    
      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));
      }
    
      function addImage() {
        var newImg = document.createElement("img");
        newImg.src = "apple.png";
        myCount += 1;
        var myString = "drag" + myCount.toString();
        newImg.id = myString;
        newImg.draggable = "true";
        newImg.ondragstart = "drag(event)";
        newImg.style = "width: 50px; height: 50px; padding-right: 4px;"
        var theDiv = document.getElementById('imgHolder');
        theDiv.appendChild(newImg);
      }
body {background-color: #ddd; font-family: arial, verdana, sans-serif;}
      #drop1 {width: 200px; height: 200px; border: 1px solid black; background-color: white;}
      #drag1 {width: 50px; height: 50px;}
      .drag {width: 50px; height: 50px;}
      <div id="drop1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
      <p> Drag the image below into the box above:</p>
      <div style="width: 50px; height: 50px; border:2px solid black; background-color: cyan; text-align: center;" onclick="addImage()">click me!</div>
      <div style="border: 2px solid black; height: 200px; width: 500px;" id="imgHolder">
        <img id="drag1" src="apple.png" draggable="true" ondragstart="drag(event)"/>
        </div>

Any help would be appreciated! I would like to just be able to make as many new images as I want and be able to drop them into the box!

Improve this question

2 Answers 2

Reset to default
1

The ongragstart function on your node need to be point the function like this 'newImg.ondragstart = drag;' with the name of the function, not like this 'newImg.ondragstart = "drag(event)";'

The new code look like this:

<!DOCTYPE HTML>
<html>
<head>
  <title>Drag and Drop Test</title>
  <style>
  body {background-color: #ddd; font-family: arial, verdana, sans-serif;}
  #drop1 {width: 200px; height: 200px; border: 1px solid black; background-color: white;}
  #drag1 {width: 50px; height: 50px;}
  .drag {width: 50px; height: 50px;}
  </style>
  <script>

  var myCount = 1;

  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));
  }

  function addImage() {
    var newImg = document.createElement("img");
    newImg.src = "apple.png";
    myCount += 1;
    var myString = "drag" + myCount.toString();
    newImg.id = myString;
    newImg.draggable = "true";
    newImg.ondragstart = drag;
    newImg.style = "width: 50px; height: 50px; padding-right: 4px;"
    var theDiv = document.getElementById('imgHolder');
    theDiv.appendChild(newImg);
  }
  </script>
</head>

<body>
  <div id="drop1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
  <p> Drag the image below into the box above:</p>
  <div style="width: 50px; height: 50px; border:2px solid black; background-color: cyan; text-align: center;" onclick="addImage()">click me!</div>
  <div style="border: 2px solid black; height: 200px; width: 500px;" id="imgHolder">
    <img id="drag1" src="apple.png" draggable="true" ondragstart="drag(event)"/>
    </div>
  </div>
</body>
</html>

Improve this answer
1

The problem is in the line newImg.ondragstart = "drag(event)"; according to https://www.w3schools.com/jsref/event_ondragstart.asp the format should be newImg.ondragstart = function(){drag(event)};. It seems to work...

<!DOCTYPE HTML>
<html>
<head>
  <title>Drag and Drop Test</title>
  <style>
  body {background-color: #ddd; font-family: arial, verdana, sans-serif;}
  #drop1 {width: 200px; height: 200px; border: 1px solid black; background-color: white;}
  #drag1 {width: 50px; height: 50px;}
  .drag {width: 50px; height: 50px;}
  </style>
  <script>

  var myCount = 1;

  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));
  }

  function addImage() {
    var newImg = document.createElement("img");
    newImg.src = "apple.png";
    myCount += 1;
    var myString = "drag" + myCount.toString();
    newImg.id = myString;
    newImg.draggable = "true";
    newImg.ondragstart = function(){drag(event)};
    //newImg.ondragstart = "drag(event)";
    newImg.style = "width: 50px; height: 50px; padding-right: 4px;"
    var theDiv = document.getElementById('imgHolder');
    theDiv.appendChild(newImg);
  }
  </script>
</head>

<body>
  <div id="drop1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
  <p> Drag the image below into the box above:</p>
  <div style="width: 50px; height: 50px; border:2px solid black; background-color: cyan; text-align: center;" onclick="addImage()">click me!</div>
  <div style="border: 2px solid black; height: 200px; width: 500px;" id="imgHolder">
    <img id="drag1" src="apple.png" draggable="true" ondragstart="drag(event)"/>
    </div>
  </div>
</body>
</html>

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.