Drag and Drop non capisco le sequenze...

[mapa]

Salve,
Sto cercando di studiare il D&D, ho alcuni problemi che mi bloccano, sono due giorni che ci provo, inutilmente, potete darmi una mano?
Ho tre immagini , ognuna ha un ID , lo spostamento all'evento dragstart lo porta in un input per controllarlo.
Lo spostamento degli oggetti dovrebbe restituirmi il numero di sequenza, la posizione in cui rilascio l'oggetto.
Non mi riesce niente di tutto questo.
Posto a seguire le righe di codice.
Potete darmi una mano a capire?
Grazie.

 <div class="container">
    <div class="row">
     <?php
            for ($n=0; $n<3; $n++){ ?>
            <div class="responsive">
                 <div class="box thumb" draggable="true" id="<?=$id[$n]?>" >
                       <img class="card-img-top img-thum" src="<?=$foto[$n]?>" alt="<?=$foto[$n]?>" style="width :100%; height:100%; padding:2px;">
                </div>   
            </div>
            <?php }?>
        </div>
   </div>
   
    <div>
            <label id="lascio">Codice</label>
          <input type="text"  id="numero">
        </div>  
    <div>
          <label id="lascio">Posizione </label>
          <input type="text"  id="seq">
      </div>

  </body>
  
</html>

<script>
document.addEventListener('DOMContentLoaded', (event) => {

  var dragSrcEl = null;
 
  function handleDragStart(e) {
    this.style.opacity = '0.4';
    
    dragSrcEl = this;

    e.dataTransfer.effectAllowed = 'move';
    e.dataTransfer.setData('text/html', this.innerHTML);
      var nr = e.target.id;
        numero.value = nr;     // mi porto il numero ID nel form per controllo
  }

  function handleDragOver(e) {
      /* punto di prelievo */
    if (e.preventDefault) {
      e.preventDefault();
    }

    e.dataTransfer.dropEffect = 'move';
    
    return false;
  }

  function handleDragEnter(e) {
    this.classList.add('over');
  }

  function handleDragLeave(e) {
    this.classList.remove('over');
    
  }

  function handleDrop(e) {
    if (e.stopPropagation) {
      e.stopPropagation(); // stops the browser from redirecting.
      
    
    }
    
    if (dragSrcEl != this) {
      dragSrcEl.innerHTML = this.innerHTML;
      this.innerHTML = e.dataTransfer.getData('text/html');
    }
    
    return false;
  }

  function handleDragEnd(e) {
    this.style.opacity = '1';
    
    items.forEach(function (item) {
      item.classList.remove('over');
    });
       /*  rilascio */
       var nrt = e.target.id;
        seq.value = nrt;
  }
 
 
  let items = document.querySelectorAll('.container .box');
   items.forEach(function(item) {
    item.addEventListener('dragstart', handleDragStart, false);
    item.addEventListener('dragenter', handleDragEnter, false);
    item.addEventListener('dragover', handleDragOver, false);
    item.addEventListener('dragleave', handleDragLeave, false);
    item.addEventListener('drop', handleDrop, false);
    item.addEventListener('dragend', handleDragEnd, false);
  });
});

</script>

 

[mapa]

Ok, risolto .