Question

我有三个div元素，其类为.box，其ID为10，11，12。我也有.box002，其ID为2。

将.box002拖到任何.box元素时，background-color和p元素将被删除。在放映时，我调用了nextslide()函数，以在放映成功的情况下显示下一张幻灯片，但是没有用。

如果放置成功，我想显示下一张要拖动的图像。

我该如何实现？

function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
  ev.dataTransfer.setData("Text", ev.target.id);
}

var x = document.get

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("Text");
  alert(data);
  var el = document.getElementById(data);

  el.parentNode.removeChild(el); // deleting drag item

  ev.target.style.backgroundColor = 'initial'; //[value indicate which box elemenet] bgcoclor none

  var pParagraph = ev.target.firstElementChild;
  console.log(pParagraph);
  ev.target.removeChild(pParagraph);

  nextslide();
}

var images = new Array();
images[0] = "https://picsum.photos/200/300/?random";
images[1] = "https://picsum.photos/200/300/?random";
images[2] = "https://picsum.photos/200/300/?random";
var currentpic = 0;
var lastpic = images.length - 1;

function nextslide() {
  if (currentpic == lastpic) {
    currentpic = 0;
    document.getElementById('slide').src = images[currentpic];
  } else {
    currentpic++;
    document.getElementById('slide').src = images[currentpic];
  }
}

.box {
  background-color: coral;
  width: 50%;
  height: 150px;
  display: inline-block;
  border-radius: 5px;
  border: 2px solid #333;
  border-color: #b3b300;
  margin: -2px;
  border-radius: 10%;
  background-color: #42e0fd;
}

.box002 {
  float: left;
  width: 50px;
  height: 50px;
  float: left;
  margin-left: 30%;
  padding-top: 2%;
  background-color: #333 2px;
  margin-bottom: 40%;
}

.text {
  padding: 20px;
  margin: 7 px;
  margin-top: 10px;
  color: white;
  font-weight: bold;
  text-align: center;
}

#container {
  white-space: nowrap;
  text-align: center;
  margin-left: 20%;
  margin-right: 30%;
}

p {
  font-size: 50px;
  color: #000000;
  text-align: center;
}

<div id="container">
  <div class="box" ondrop="drop(event)" ondragover="allowDrop(event)" id="10">
    <p name="values">12</p>
  </div>
  <div class="box" ondrop="drop(event)" ondragover="allowDrop(event)" id="11">
    <p name="values">21</p>
  </div>
  <div class="box" ondrop="drop(event)" ondragover="allowDrop(event)" id="12">
    <p name="values">17</p>
  </div>
</div>

<div class="box002" draggable="true" ondragstart="drag(event)" id="2" onclick="nextslide()">
  <img src="https://picsum.photos/200/300/?random" draggable="true" id="slide" style="width:100px; height:100px; border-radius: 50%;" border="rounded" />
</div>

Answer 1

感谢一个有趣且非常有趣的问题。正如马里奥·巴斯克斯（MarioVázquez）正确指出的那样，您正在删除图像，然后尝试稍后再引用它。自从您发布该问题以来，我一直在研究此问题，但没有意识到这是问题所在。但是在那之后，您的文本删除还有另一个错误。您尝试删除的内容firstElementChild实际上不是节点，而是元素。因此，当您调用命令removeChild时，该命令将无法运行，因为该命令只会删除节点。

要解决此问题，只需将firstElementChild替换为firstChild。这很容易解决。然后删除el.parentNode.removeChild(el)，以解决删除该图像的问题，然后再在代码中实际调用它。

希望这会有所帮助。从您友好的邻居网民

下一个呼叫时不显示下一个图像功能

1 个答案: