title: Load images one by one after each sucessfull drop for dragging
body: <p>want to load images one by one after each successful drop for dragging </p>
  
  <p>another image should load in place of the same place where first image is dragged from for a second drag.</p>
  
  <p>how to implement it.i have achieved drag and drop of first image , what is the change and how is it possible</p>
  
  <p>i have tried many many ways im a newbie in js is it possible in js</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function drop006(event) {
  var data = event.dataTransfer.getData("choice001");
  event.target.appendChild(document.getElementById(data));
  score001.innerHTML = b++;
  place001.innerHTML = " &lt;'https://picsum.photos/100/100/?random' alt = 'infinix' style='width:200px;height:200px;'&gt;";
  
  }    
  
  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 &lt; 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;
   }
    }
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="box001" ondrop="drop006(event)" ondragover="allowDrop001(event)" id="place001" style="background-image:url(https://picsum.photos/100/100/)"&gt;
  &lt;/div&gt;
  
  
  &lt;div class="box002" ondrop="drop001(event)" id="plac002" ondrop="pushArray()"&gt;
    &lt;img src="https://picsum.photos/100/100/?random" ondragstart="dragStart001(event)" draggable="true" id="target001" style="width:200px; height:200px;" border="rounded" /&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>