每次成功拖放后一一加载图像

Question

要在每次成功拖放拖放后一次加载图像

另一张图片应代替拖动第一张图片进行第二次拖动的位置。

如何实现它。我已经实现了对第一张图片的拖放，有什么变化以及如何实现

我已经尝试了很多新方法来在js中使用新手

function drop006(event) {
var data = event.dataTransfer.getData("choice001");
event.target.appendChild(document.getElementById(data));
score001.innerHTML = b++;
place001.innerHTML = " <'https://picsum.photos/100/100/?random' alt = 'infinix' style='width:200px;height:200px;'>";

}    

function dragStart001(event) {
  event.dataTransfer.setData("choice001", event.target.id);
}

function allowDrop001(event) {
  event.preventDefault();
}


function drop001(event) {
  event.preventDefault();
}


var imgArray = new Array();
imgArray[0] = new Image();
imgArray[0].src = 'https://picsum.photos/100/100/?random';
imgArray[1] = new Image();
imgArray[1].src = 'https://picsum.photos/100/100/?random';
imgArray[5] = new Image();
imgArray[5].src = 'https://picsum.photos/100/100/?random';


function pushArray(element) {
  var img = document.getElementById(imgArray);
  for (var i = 0; i < imgArray.length; i++) {
	if (imgArray[i].src == img.src) {
	  if (i === imgArray.length) {
		document.getElementById(element).src = imgArray[0].src;
		break;
	  }

	  document.getElementById(element).src = imgArray[i + 1].src;
	  break;
	}
  }
}

.box001 {
  float: left;
  width: 200px;
  height: 200px;
  border: 1px solid black;
}

.box002 {
  float: left;
  width: 50px;
  height: 50px;
  border: 1px solid white;
  background: :url(clock.jpg);
  margin: -50px;
  right: 20px;
}

<div class="box001" ondrop="drop006(event)" ondragover="allowDrop001(event)" id="place001" style="background-image:url(https://picsum.photos/100/100/)">
</div>


<div class="box002" ondrop="drop001(event)" id="plac002" ondrop="pushArray()">
  <img src="https://picsum.photos/100/100/?random" ondragstart="dragStart001(event)" draggable="true" id="target001" style="width:200px; height:200px;" border="rounded" />
</div>