我有一个类Box2,Box,Box包含从array2中随机选择的值,它是数组项的副本

当拖动的元素URL与删除的元素标签匹配时,背景颜色消失.

如果tempimages == 0,我已经给出了条件,随机选择再次发生.即,当drop是最后一个元素时.

我的问题是当drop到达倒数第二个元素时,会在类框中随机选择和重新填充元素

我希望这发生在最后一个盒子上.

如何实现和纠正呢？

var items = [{
    label: '1:40',url: 'https://via.placeholder.com/75x75?text=1'
  },{
    label: '2:20',url: 'https://via.placeholder.com/75x75?text=2'
  },{
    label: '3:50',url: 'https://via.placeholder.com/75x75?text=3'
  },{
    label: '4:45',url: 'https://via.placeholder.com/75x75?text=4'
  },{
    label: '5:35',url: 'https://via.placeholder.com/75x75?text=5'
  },{
    label: '6:10',url: 'https://via.placeholder.com/75x75?text=6'
  },{
    label: '7:15',url: 'https://via.placeholder.com/75x75?text=7'
  },{
    label: '8:10',url: 'https://via.placeholder.com/75x75?text=8'
  },{
    label: '9:30',url: 'https://via.placeholder.com/75x75?text=9'
  },{
    label: '10:40',url: 'https://via.placeholder.com/75x75?text=10'
  },{
    label: '11:20',url: 'https://via.placeholder.com/75x75?text=11'
  },{
    label: '12:50',url: 'https://via.placeholder.com/75x75?text=12'
  },{
    label: '01:45',url: 'https://via.placeholder.com/75x75?text=13'
  },{
    label: '02:25',url: 'https://via.placeholder.com/75x75?text=14'
  },{
    label: '03:40',url: 'https://via.placeholder.com/75x75?text=15'
  }
]

var tempimages = [];
var array2 = [];
array2 = items.slice();


var len = array2.length;
console.log(len);
var item;



function rvalue() {

  ptags = document.querySelectorAll('[name="values"]');

  for (var index = 0; index < 3; index++) {
    randomIndex = Math.floor(Math.random() * array2.length),item = array2[randomIndex];
    ptags[index].textContent = item.label;
    tempimages.push({
      data: item,index: randomIndex
    });

    ptags[index].dataset.itemIndex = randomIndex;
  }
  var tlen = tempimages.length;



}


function displayAllImages() {
  if (tempimages.length == 0) {
    rvalue();
    //return;

  }
  item = tempimages.shift();
  image = document.getElementById('slide');
  image.src = item.data.url;
  image.dataset.itemIndex = item.index;



};

$(function() {

  rvalue();
  displayAllImages();

});

function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
  ev.dataTransfer.setData("Text",ev.target.id);
}

function drop(ev) {

  ev.preventDefault();
  console.log(ev.srcElement);

  var data = ev.dataTransfer.getData("Text");
  var el = document.getElementById(data);
  //alert(data);
  //alert(el);

  var x = document.getElementById("slide").dataset.itemIndex;
  var y = ev.target.dataset.itemIndex;

  // alert("x=>" + x + " y=>" + y);

  if (x == y) {
    el.parentNode.removeChild;


    ev.currentTarget.style.backgroundColor = 'initial';

    var pParagraph = ev.currentTarget.firstElementChild;
    //ev.currentTarget.removeChild(pParagraph);

    item = this.item;
    var arrayvalue = item.dataindex;
    array2.splice(arrayvalue,1);


    displayAllImages();

    alert("sucessfull");
    if (tempimages.length == 0) {
      alert("NO more images");
      rvalue();

    }

  } else {
    alert("WRONG PLACE");
  }

}

.Box {
  width: 50px;
  height: 50px;
  display: inline-block;
  border: 2px solid #333;
  border-color: #e6e600;
  margin: -2px;
  background-color: #66cc99;
  vertical-align: middle;
}

.Box2 {
  float: left;
  width: 30px;
  height: 30px;
  float: left;
  margin-top: 3%;
  padding-top: 2%;
  background-color: #ffff00 2px;
  border: px solid #000066;
}

.containerr {
  margin-top: 5%;
  margin-right: 20%;
  margin-left: 0%;
  border: px solid #FF3399;
}