Загружайте изображения одно за другим после каждого успешного перетаскивания - PullRequest
0 голосов
/ 28 августа 2018

хочу загружать изображения одно за другим после каждого успешного перетаскивания для перетаскивания

другое изображение должно загружаться вместо того же места, куда перетаскивается первое изображение, для второго перетаскивания.

как это реализовать. Я достиг перетаскивания первого изображения, что это за изменение и как это возможно

я пробовал много разных способов, я новичок в js, возможно ли это в 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...