多次拖放不起作用

Question

到目前为止，我从一张图片开始，我可以将它拖到一个框中然后放下，效果很好。但是我有一个按钮可以生成更多图像，当我将它们放在与原始图像相同的东西上时，它们不会放在那里。

我的代码：

 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>

如有任何帮助，我们将不胜感激！我希望能够制作尽可能多的新图像并将它们放入盒子中！

Answer 1

问题出在 newImg.ondragstart = "drag(event)"; 行，根据 https://www.w3schools.com/jsref/event_ondragstart.asp 格式应该是 newImg.ondragstart = function(){drag(event)};。好像有用...

<!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>

Answer 2

您节点上的 ongragstart 函数需要像这样 'newImg.ondragstart = drag;' 用函数名称指向函数，而不是像这样 'newImg.ondragstart = "drag(event)";'

新代码如下所示：

<!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>

多次拖放不起作用

Multiple drag and drops not working

html

javascript

drag-and-drop

drag