javascript - 在放置时显示下一个图像

Question

我有三个 id 为 10、11、12 的 div 框。我有一个图像数组，在放置一个项目框时，框元素被删除，我在 on-drop 方法中调用函数 nextslide 来显示下一张幻灯片.

将第一个元素放在 id 为 10、11、12 的任何盒子上时，盒子被删除，但通过 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


  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: 20%;
  height: 60px;
  display: inline-block;
  border-radius: 5px;
  margin: -2px;
  border-radius: 12%;
  background-color: #00b300;
}

<div id="container">
  <div class="box" ondrop="drop(event)" ondragover="allowDrop(event)" id="10">
    <p name="values"></p>
  </div>
  <div class="box" ondrop="drop(event)" ondragover="allowDrop(event)" id="11">
    <p name="values"></p>
  </div>
  <div class="box" ondrop="drop(event)" ondragover="allowDrop(event)" id="12">
    <p name="values"></p>
  </div>
</div>

<div class="box2" draggable="true" ondragstart="drag(event)" id="2">
  <img src="https://picsum.photos/200/300/?random" draggable="true" id="slide" style="width:30px; height:100px; border-radius: 50%;" border="rounded" onclick="nextslide()" />
</div>

标签： javascriptjqueryhtmlcss