javascript poczatkujacy drag drop

Question

Witam. Jestem początkujący... To mój pierwszy "projekt". Problem pojawia się na samym początku.
Nie umiem odświeżyć aktualnej ilości piłkarzy w formacji. Chciałbym docelowo określić maksymalne i minimalne ilości piłkarzy w określonej formacji ale po zdropowaniu piłkarza mam cały czas tę samą wartość. Próbowałem różnych rzeczy... ale.... pomocy...

<div id="f442">
     
         <div class="line" id="brline">
             
             
             <div class="player" id="br1" draggable="true"><div class="numr" id="nr1">1</div><span class="plaj" id="play1"></span><span class="infoplayer" id="infpl1">adama Traorse</span><span class="potencial" id="pot1">*****<br> 75</span></div>
         
         
         </div>   
         
          <div class="line" id="defline">
             
             
             
              <div class="player def" id="def1" draggable="true"><div class="numr" id="nr2">2</div><span class="plaj" id="play1"></span><span class="infoplayer" id="infpl2">adama Traorse</span><span class="potencial" id="pot1">*****<br> 75</span></div>
              
              <div class="player def" id="def2" draggable="true"><div class="numr" id="nr3">3</div><span class="plaj" id="play1"></span><span class="infoplayer" id="infpl3">adama Traorse</span><span class="potencial" id="pot1">*****<br> 75</span></div>
              
              <div class="player def" id="def3" draggable="true"><div class="numr" id="nr4">4</div><span class="plaj" id="play1"></span><span class="infoplayer" id="infpl4">adama Traorse</span><span class="potencial" id="pot1">*****<br> 75</span></div>
              
              <div class="player def" id="def4" draggable="true"><div class="numr" id="nr5">5</div><span class="plaj" id="play1"></span><span class="infoplayer" id="infpl5">adama Traorse</span><span class="potencial" id="pot1">*****<br> 75</span></div>
         
         
         </div> 
       
           <div class="line" id="midline">
             
             
               <div class="player mid" id="mid1" draggable="true"><div class="numr" id="nr6">6</div><span class="plaj" id="play1"></span><span class="infoplayer" id="infpl6">adama Traorse</span><span class="potencial" id="pot1">*****<br> 75</span></div>
               
               <div class="player mid" id="mid2" draggable="true"><div class="numr" id="nr7">7</div><span class="plaj" id="play1"></span><span class="infoplayer" id="infpl7">adama Traorse</span><span class="potencial" id="pot1">*****<br> 75</span></div>
               
               <div class="player mid" id="mid3" draggable="true"><div class="numr" id="nr8">8</div><span class="plaj" id="play1"></span><span class="infoplayer" id="infpl8">adama Traorse</span><span class="potencial" id="pot1">*****<br> 75</span></div>
               
               <div class="player mid" id="mid4" draggable="true"><div class="numr" id="nr9">9</div><span class="plaj" id="play1"></span><span class="infoplayer" id="infpl9">adama Traorse</span><span class="potencial" id="pot1">*****<br> 75</span></div>
         
         
         </div> 
          <div class="line" id="attline">
             
             
              <div class="player att" id="att1" draggable="true"><div class="numr" id="nr10">10</div><span class="plaj" id="play1"></span><span class="infoplayer" id="infpl10">adama Traorse</span><span class="potencial" id="pot1">*****<br> 75</span></div>
              
              <div class="player att" id="att2" draggable="true"><div class="numr" id="nr11">11</div><span class="plaj" id="play1"></span><span class="infoplayer" id="infpl11">adama Traorse</span><span class="potencial" id="pot1">*****<br> 75</span></div>
            
         
         
         </div> 
       
 </div> 

const lines = document.querySelectorAll('.line');
const players = document.querySelectorAll('.player');
const br1 = document.querySelector('#br1');
const defline = document.querySelectorAll('.def');
const midline = document.querySelectorAll('.mid');
const attline = document.querySelectorAll('.att');
const subs = document.querySelectorAll('#subs');
const players2 = document.querySelectorAll('.player2');
var lenD = defline.length;
var lenM = midline.length;
var lenA = attline.length;
var lenS = players2.length;

let draggedPlayer = null;

for (let i = 0; i < players.length; i++)
    {
        
        
        const player = players[i];
        
        player.addEventListener('dragstart', function()
                {
               
                draggedPlayer = player;
                setTimeout(function()
                       {
                player.style.display ='none';
                },0)
        });
        
        
        player.addEventListener('dragend', function()
                {
               
             setTimeout(function()
                          {
                     if(lenD>2 && lenD<6 && lenM>1 && lenM<7 && lenA>0 && lenA<6 && lenS>3 && lenS<10)
                {
                    player.style.display ='flex';
                    draggedPlayer=null;
                    console.log('dobrze');
                   
                  
                    
                }
                     else{
                         console.log('pizda');
                         
                     }   
               
                
               },0);
            
        });
        for (let j=0; j<lines.length; j++)
            {
                const line = lines[j];
                line.addEventListener('dragover', function(e){
                    e.preventDefault();
                    
                });
                
                 line.addEventListener('dragenter', function(e){
                    e.preventDefault();
                     this.style.bacgroundColor ='blue';
                      
                });
                
                 line.addEventListener('dragleave', function(e){
                    e.preventDefault();
                     this.style.bacgroundColor ='green';
                  
                });
                
                 line.addEventListener('drop', function(e){
                     
                    this.append(draggedPlayer);
                     this.style.backgroundColor ='grey';
                     
                     console.log('drop');
                      
                  
                
                });
            }
    }

 

Answer 1

W którym miejscu potrzebujesz mieć dostęp do odświeżonej liczby piłkarzy formacji?

Przyczyną Twojego problemu może być użycie na początku programu querySelectorAll, który zwraca statyczną listę elementów (jej zawartość nie zmienia się w czasie), na której opierasz wartości zmiennych len[D/M/A/S] - sprawdzasz je w ifach, ale one same z siebie nie zmienią wartości.

Nie analizowałem dokładnie aplikacji, więc trochę "na oko" powiem, że możesz albo zmienić querySelectorAll na document.getElementsByClassName (ona zwraca żywą kolekcję elementów), albo za każdym przeniesieniem piłkarza na nowo pobierać statyczną listę danej formacji przez querySelectorAll. Poza tym, rozmiar kolekcji (property length) powinieneś sprawdzać za każdym razem, a nie tylko na początku programu - można by to próbować zautomatyzować np. użyciem Proxy na kolekcji, ale skoro to Twój pierwszy projekt, to moim zdaniem szkoda komplikować sobie pracę.

Comments

już zaczynam od nowa. Właśnie skumałem, że querySelectorAll mi tu robi problemy.
Robię to już w zupełnie inny sposób, po prostu jak małpa po jednym divie i w taki sposób się będę uczył. Czytałem o tym Proxy... ale bez sensu to komplikować. Musze skumać to od podstaw, więc sorry za problem i dzięki za odpowiedź.

---

Mógłbyś uniknąć ponownego pobierania listy formacji przy każdym przenoszeniu piłkarza, gdybyś posłużył się referencją do jego elementu: element.parentNode.children.length -> to, za pośrednictwem parenta (który reprezentuje w Twoim kodzie formację piłkarzy), odczyta liczbę jego dzieci. Wyjdzie na to samo, ale bez konieczności bezpośredniego pobierania listy z DOM.

Zanim użyjesz takiego sposobu, upewnij się, że nie potrzebujesz dostępu do list reprezentujących pozostałe formacje - w takim przypadku bardziej spójne może się jednak okazać bezpośrednie pobieranie potrzebnych list.