jak zamienić divy miejscami js drag drop swap

Question

siema. jestem amatorem i to mój pierwszy "projekt", nad którym już się trochę męczę i potrzebuję pomocy, nakierowania. Chciałbym do obecnego kodu ustawić możliwość podmienienia miejscami piłkarzy po zastosowaniu drag/drop. Chodzi mi o to, żeby można było podmienić tylko na zawodnika z tej samej formacji. Próbowałem już na takie

  <div id="f442">
         
         
         <div class="pitch max">
  
          <div class="line" id="attline">
             
             
              <div class="player att fir af" id="att1" name="pilkorz" data-name="att" data-accept="att" draggable="true"><div class="numr" id="nr10">10</div><span class="plaj" id="play1"></span><span class="infoplayer" id="infpl10">Robert Lewandowski</span><span class="potencial" id="pot1">*****<br> 75</span></div>
              
              <div class="player att fir af" id="att2" name="pilkorz" data-name="att" data-accept="att" draggable="true"><div class="numr" id="nr11">11</div><span class="plaj" id="play1"></span><span class="infoplayer" id="infpl11">Sergio Aguero</span><span class="potencial" id="pot1">*****<br> 75</span></div>
            
         
         
         </div> 
       
         
       
       
           <div class="line" id="midline">
             
             
               <div class="player mid fir mf" id="mid1" name="pilkorz" data-name="mid" data-accept="mid" draggable="true"><div class="numr" id="nr6">6</div><span class="plaj" id="play1"></span><span class="infoplayer" id="infpl6">David Beckham</span><span class="potencial" id="pot1">*****<br> 75</span></div>
               
               <div class="player mid fir mf" id="mid2" name="pilkorz" data-name="mid" data-accept="mid" draggable="true"><div class="numr" id="nr7">7</div><span class="plaj" id="play1"></span><span class="infoplayer" id="infpl7">Luis Figo</span><span class="potencial" id="pot1">*****<br> 75</span></div>
               
               <div class="player mid fir mf" id="mid3" name="pilkorz" data-name="mid" data-accept="mid" draggable="true"><div class="numr" id="nr8">8</div><span class="plaj" id="play1"></span><span class="infoplayer" id="infpl8">Zinedine Zidane</span><span class="potencial" id="pot1">*****<br> 75</span></div>
               
               <div class="player mid fir mf" id="mid4" name="pilkorz" data-name="mid" data-accept="mid" draggable="true"><div class="numr" id="nr9">9</div><span class="plaj" id="play1"></span><span class="infoplayer" id="infpl9">Cristiano Ronaldo</span><span class="potencial" id="pot1">*****<br> 75</span></div>
         
         
         </div> 
      
           <div class="line" id="defline">
             
             
             
              <div class="player def fir df" id="def1" name="pilkorz" data-name="def" data-accept="def" draggable="true"><div class="numr" id="nr2">2</div><span class="plaj" id="play1"></span><span class="infoplayer" id="infpl2">Philip Lahm</span><span class="potencial" id="pot1">*****<br> 75</span></div>
              
              <div class="player def fir df" id="def2" name="pilkorz" data-name="def" data-accept="def" draggable="true"><div class="numr" id="nr3">3</div><span class="plaj" id="play1"></span><span class="infoplayer" id="infpl3">Jap Stam</span><span class="potencial" id="pot1">*****<br> 75</span></div>
              
              <div class="player def fir df" id="def3" name="pilkorz" data-name="def" data-accept="def" draggable="true"><div class="numr" id="nr4">4</div><span class="plaj" id="play1"></span><span class="infoplayer" id="infpl4">Rio Ferdinand</span><span class="potencial" id="pot1">*****<br> 75</span></div>
              
              <div class="player def fir df" id="def4" name="pilkorz" data-name="def" data-accept="def" draggable="true"><div class="numr" id="nr5">5</div><span class="plaj" id="play1"></span><span class="infoplayer" id="infpl5">Roberto Carlos</span><span class="potencial" id="pot1">*****<br> 75</span></div>
         
         
         </div> 
        
           <div class="line" id="brline">
             
             
             <div class="player br fir" id="br1" name="pilkorz" data-name="br" data-accept="br" draggable="true"><div class="numr" id="nr1">1</div><span class="plaj" id="play1"></span><span class="infoplayer" id="infpl1">Luigi buffon</span><span class="potencial" id="pot1">*****<br> 75</span></div>
         
         
         </div>   
        </div>


     <div class="line" id="subs">
             
             
         <div class="player2 player br" id="sub1" name="pilkorz" data-name="br" data-accept="br" draggable="true"><div class="numr" id="nr12">12</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 class="player2 player def" id="sub2" name="pilkorz" data-name="def" data-accept="def" draggable="true"><div class="numr" id="nr12">13</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 class="player2 player def" id="sub3" name="pilkorz" data-name="def" data-accept="def" draggable="true"><div class="numr" id="nr12">14</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 class="player2 player mid" id="sub4" name="pilkorz" data-name="mid" data-accept="mid" draggable="true"><div class="numr" id="nr12">15</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 class="player2 player mid" id="sub5" name="pilkorz" data-name="mid" data-accept="mid" draggable="true"><div class="numr" id="nr12">16</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 class="player2 player att" id="sub6" name="pilkorz" data-name="att" data-accept="att" draggable="true"><div class="numr" id="nr12">17</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 class="player2 player att" id="sub7" name="pilkorz" data-name="att" data-accept="att" draggable="true"><div class="numr" id="nr12">18</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> 
    

const lines = $('.line');
let players = document.getElementsByName('pilkorz');
const pil =$('.player');
const brline = $('.br');
const defline = $('.def');
const midline = $('.mid');
const attline = $('.att');
const subsline = $('.subs');
const fir = document.getElementsByClassName('fir');
const sec = document.getElementsByClassName('player2');
players=[...players];

var lenD = defline.length;
var lenM = midline.length;
var lenA = attline.length;
var lenS = subsline.length;

const br1 = document.getElementById('br1');
const def1 = document.getElementById('def1');
const def2 = document.getElementById('def2');
const def3 = document.getElementById('def3');
const def4 = document.getElementById('def4');
const mid1 = document.getElementById('mid1');
const mid2 = document.getElementById('mid2');
const mid3 = document.getElementById('mid3');
const mid4 = document.getElementById('mid4');
const att1 = document.getElementById('att1');
const att2 = document.getElementById('att2');
const sub1 = document.getElementById('sub1');
const sub2 = document.getElementById('sub2');
const sub3 = document.getElementById('sub3');
const sub4 = document.getElementById('sub4');
const sub5 = document.getElementById('sub5');
const sub6 = document.getElementById('sub6');
const sub7 = document.getElementById('sub7');














var ile=0;


for (var i = 0 ; i < players.length; i++) {
  const player = players[i];
    
    function dodaj()
{
  
   ile++;
    
    
if(ile==1)
    {
        console.log('pierwsze');
        player.classList.add('aktywna2');
    }
if(ile==2)
    {
        pil.removeClass('aktywna3');
        console.log('dwa');
        pil.removeClass('aktywna2');
    }

    
}; 


   player.addEventListener('click' , dodaj , false ) ; 
    
       
};




for (var i = 0 ; i < pil.length; i++) {
  const gracz = pil[i];
gracz.addEventListener("dragstart", e=>{
    e.dataTransfer.setData("text/plain", gracz.id);
                        });

for(const dropZone of players)
    {
        dropZone.addEventListener("dragover", e=>
                                 {
           e.preventDefault();
            dropZone.classList.add('aktywna4');
        });
        
        dropZone.addEventListener("dragleave", e=>
                                 {
                                  dropZone.classList.remove('aktywna4');
                                  });
        
        
        dropZone.addEventListener("drop", e=>
                                 {
           e.preventDefault();
            
        });
    };
};


for(var i=0; i<defline.length; i++)
    {
        let def = defline[i];
        
        
   def.addEventListener("click", e=> {
       if(ile==1)
           {
   defline.addClass('aktywna3'); 
   def.classList.remove('aktywna3'); 
              
           } 
           
       if(ile==2)
           {
               defline.removeClass('aktywna3');
               ile=0;
           }
       
});
    };


for(var i=0; i<midline.length; i++)
    {
        let mid = midline[i];
   mid.addEventListener("click", e=> {
        if(ile==1)
           {
   midline.addClass('aktywna3'); 
   mid.classList.remove('aktywna3');
              
   
           }
       if(ile==2)
           {
               midline.removeClass('aktywna3');
               ile=0;
           }
       
});
    };
for(var i=0; i<attline.length; i++)
    {
        let att = attline[i];
   att.addEventListener("click", e=> {
        if(ile==1)
           {
   attline.addClass('aktywna3'); 
   att.classList.remove('aktywna3'); 
           }
       if(ile==2)
           {
               attline.removeClass('aktywna3');
               ile=0;
           }
       
});
    };
for(var i=0; i<subsline.length; i++)
    {
        let subs = subsline[i];
   subs.addEventListener("click", e=> {
        if(ile==1)
           {
   subsline.addClass('aktywna3'); 
   subs.classList.remove('aktywna3'); 
           }
       if(ile==2)
           {
               subsline.removeClass('aktywna3');
               ile=0;
           }
       
});
    };

for(var i=0; i<brline.length; i++)
    {
        let br = brline[i];
   br.addEventListener("click", e=> {
        if(ile==1)
           {
   brline.addClass('aktywna3'); 
   br.classList.remove('aktywna3'); 
           }
       if(ile==2)
           {
               brline.removeClass('aktywna3');
               ile=0;
           }
       
});
};

sposoby, że musiałem 70% kodu usunąć xd. Najbliżej mi chyba było z metodą clone().... ale....

Answer 1

1. SortableJS - library for reorderable drag-and-drop lists

   ... Can drag from one list to another or within the same list ...

   
   
    
2. jQuery Sortable -  a flexible, opinionated sorting plugin for jQuery