在下拉菜单中显示下一张图片

Question

我有三个ID为10、11、12的div框。我有一个图像数组，在放下一个item框时，box元素被删除，我在on-drop方法中调用了nextslide函数，该函数调用next滑动以显示。

在将第一个元素放在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>