无法在 JS 中将图像拖放到另一个图像上？

Question

我正在用 JS 编写代码，将一个图像拖放到另一个图像上。但是我得不到想要的结果。放下图像时，它突然消失了。我已经提到了前面的问题，但找不到帮助。有人帮我理解这个问题。

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 class="col3 col-sm-12 col-md-4" id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
  <img src="https://picsum.photos/id/10/100/100" draggable="true" ondragstart="drag(event)" id="drag1">
</div>

<div class="col4 col-sm-12 col-md-4" id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">   
  <img src="https://picsum.photos/id/1/100/100" alt="gown4">
</div>

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

#div1, #div2 {
  float: left;
  width: 100px;
  height: 35px;
  margin: 10px;
  padding: 10px;
  border: 1px solid black;
}

<!DOCTYPE HTML>
<html>
<head>

</head>
<body>
 

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
  <img src="https://www.w3schools.com/html/img_w3slogo.gif" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="31">
</div>

<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)" style="background:url(https://www.w3schools.com/images/w3certified_logo_250.png);background-repeat:no-repeat;background-size:cover;">  </div>

</body>
</html>

Answer 2

event.target return 最高元素，在您的案例中是 img 元素。所以发生的事情是您将拖动的图像附加到第二个图像中，而不是按预期附加到 div 中。

您可以做的是将要放入的元素作为函数的第二个参数传递，以确保放入所需的容器而不是某个子元素。

像这样：

function allowDrop(ev){
   ev.preventDefault();
}
function drag(ev){
   ev.dataTransfer.setData("text", ev.target.id);
   console.log(ev.target.id);
}
function drop(ev, el){
console.log(ev);
   ev.preventDefault();
   var data = ev.dataTransfer.getData("text");
   el.appendChild(document.getElementById(data));
}

<div class="col3 col-sm-12 col-md-4" id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
  <img src="https://picsum.photos/id/10/100/100" draggable="true" ondragstart="drag(event)" id="drag1">
</div>

<div class="col4 col-sm-12 col-md-4" id="div2" ondrop="drop(event, this)" ondragover="allowDrop(event)">   
  <img src="https://picsum.photos/id/1/100/100" alt="gown4">
</div>

无法在 JS 中将图像拖放到另一个图像上？

Unable to drag and drop an image over another image in JS?

html

javascript

css

drag-and-drop