Question

我正在使用w3学校的HTML5拖放教程。

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

我扔东西的地方在这里：

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

这是w3schools的例子。我已经花了一点点掉落部分，有：

<div id="columna" ondrop="drop(event)" ondragover="allowDrop(event)">
  <div id="elementa">AAAA</div>
  <div id="elementb">BBBB</div>
</div>

然后出现了问题。当我将一个元素拖入“columna”时，我想将它附加到元素列表中。但。代码将选择“elementa”作为我丢弃它的位置的ID如果我放弃A的等等。是否有某种方法总是让父级定义ondrop-action？

作为一种解决方法，我创建了一个函数来检查我拾取的id是否包含字符串“column”，如果没有查找父对象，直到找到“column”。（上面的例子有点简化，可能有更多级别的div。而且其中一些div通常根本不需要ID。）

因此。是否可以通过ondrop动作找到div的ID？

我在W3学校的Tryid编辑器中尝试了这个，如下所示。我的问题是图像将附加到蓝色或红色div，即使它是黄色的具有ondrop动作。

 <!DOCTYPE HTML>
   <html>
   <head>
   <style>
   #div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
   </style>
   <script>
   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));
   }
   </script>
   </head>
   <body>

   <p>Drag the W3Schools image into the rectangle:</p>

   <div id="columna" ondrop="drop(event)" ondragover="allowDrop(event)" style="background-color:yellow; height:500px;">
   <div id="elementa" style="background-color:red;">AAAA</div>
   <div id="elementb" style="background-color:blue;">BBBB</div>
   </div>
   <br>
   <img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">

   </body>
   </html>

Answer 1

如果您希望它始终拖动到drop元素的父级或某个已知的放置目标，请更改：

ev.target.appendChild(document.getElementById(data)); 
// to
document.getElementById('columna').appendChild(document.getElementById(data));

您可以将document.getElementById('columna')替换为您想要的任何选择器。

Answer 2

将javascript中的最后一行更改为：

  ev.currentTarget.appendChild(document.getElementById(data));

似乎成功了。

放入正确的div

2 个答案: