Блог

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

Вот код, и у меня в папке javascript еще ничего не сделано, потому что я не знаю, что делать.

Я пытался искать ответы в Google и в курсе udemy по javascript, нашел что-то похожее в курсе udemy, но это было слишком запутанно, потому что там было написано много разного кода в html и в javascript, который повлиял бы на перетаскивание.

 <div class="middle">
       <div class="place">
           <img src="images/S.jpg" alt="S">
           <img src="images/A.jpg" alt="A">
           <img src="images/B.jpg" alt="B">
           <img src="images/C.jpg" alt="C">
           <img src="images/D.jpg" alt="D">
           <img src="images/E.jpg" alt="E">
           <img src="images/F.jpg" alt="F">
           <img src="images/Troll.jpg" alt="Troll">
       </div>
       <div class="champs">
           <ul>
           <li><img width="100px" draggable="true" src="images/Akuma.jpg" alt="Akuma"></li>
           <li><img width="100px" draggable="true" src="images/Alise.jpg" alt="Alise"></li>
           <li><img width="100px" draggable="true" src="images/Alucard.jpg" alt="Alucard"></li>
           <li><img width="100px" draggable="true" src="images/ArabKebab.jpg" alt="Arab"></li>
           <li><img width="100px" draggable="true" src="images/Asuka.jpg" alt="Asuka"></li>
           <li><img width="100px" draggable="true" src="images/Bob.jpg" alt="Bob"></li>
           <li><img width="100px" draggable="true" src="images/Bruce.jpg" alt="Bruce"></li>
           <li><img width="100px" draggable="true" src="images/Bryan.jpg" alt="Bryan"></li>
           <li><img width="100px" draggable="true" src="images/Djin.jpg" alt="Djin"></li>
           <li><img width="100px" draggable="true" src="images/Dragov.jpg" alt="Dragov"></li> </ul>
           <ul>
           <li><img width="100px" draggable="true" src="images/Eddy.jpg" alt="Eddy"></li>
           <li><img width="100px" draggable="true" src="images/Elise.jpg" alt="Elise"></li>
           <li><img width="100px" draggable="true" src="images/Fatman.jpg" alt="Fatman"></li>
           <li><img width="100px" draggable="true" src="images/Feng.jpg" alt="Feng"></li>
           <li><img width="100px" draggable="true" src="images/Gigas.jpg" alt="Gigas"></li>
           <li><img width="100px" draggable="true" src="images/Honda.jpg" alt="Honda"></li>
           <li><img width="100px" draggable="true" src="images/Jack6.jpg" alt="Jack6"></li>
           <li><img width="100px" draggable="true" src="images/Jackie.jpg" alt="Jackie"></li>
           <li><img width="100px" draggable="true" src="images/Jin.jpg" alt="Jin"></li>
           <li><img width="100px" draggable="true" src="images/Josie.jpg" alt="Josie"></li> </ul>
           <ul>
           <li><img width="100px" draggable="true" src="images/Julia.jpg" alt="Julia"></li>
           <li><img width="100px" draggable="true" src="images/Kata.jpg" alt="Kata"></li>
           <li><img width="100px" draggable="true" src="images/Kazuja.jpg" alt="Kazuja"></li>
           <li><img width="100px" draggable="true" src="images/Kazumi.jpg" alt="Kazumi"></li>
           <li><img width="100px" draggable="true" src="images/King.jpg" alt="King"></li>
           <li><img width="100px" draggable="true" src="images/Kirito.jpg" alt="Kirito"></li>
           <li><img width="100px" draggable="true" src="images/Kuma.jpg" alt="Kuma"></li>
           <li><img width="100px" draggable="true" src="images/Lars.jpg" alt="Lars"></li>
           <li><img width="100px" draggable="true" src="images/Lee.jpg" alt="Lee"></li>
           <li><img width="100px" draggable="true" src="images//Leo.jpg" alt="Leo"></li> </ul>
           <ul>
           <li><img width="100px" draggable="true" src="images/Lily.jpg" alt="Lily"></li>
           <li><img width="100px" draggable="true" src="images/Logan Paul.jpg" alt="Paul"></li>
           <li><img width="100px" draggable="true" src="images/Lucky.jpg" alt="Lucky"></li>
           <li><img width="100px" draggable="true" src="images/Master yi.jpg" alt="Master yi"></li>
           <li><img width="100px" draggable="true" src="images/Miguel.jpg" alt="Miguel"></li>
           <li><img width="100px" draggable="true" src="images/Murlock.jpg" alt="Murlock"></li>
           <li><img width="100px" draggable="true" src="images/Nibba.jpg" alt="Nibba"></li>
           <li><img width="100px" draggable="true" src="images/Negan.jpg" alt="Negan"></li>
           <li><img width="100px" draggable="true" src="images/Nina.jpg" alt="Nina"></li>
           <li><img width="100px" draggable="true" src="images/Ujob.jpg" alt="Ujob"></li> </ul>
           <ul>
           <li><img width="100px" draggable="true" src="images/Panda.jpg" alt="Panda"></li>
           <li><img width="100px" draggable="true" src="images/Prince.jpg" alt="Prince"></li>
           <li><img width="100px" draggable="true" src="images/raven.jpg" alt="Raven"></li>
           <li><img width="100px" draggable="true" src="images/Senis.jpg" alt="Senis"></li>
           <li><img width="100px" draggable="true" src="images/Slut.jpg" alt="Slut"></li>
           <li><img width="100px" draggable="true" src="images/Steve.jpg" alt="Steve"></li>
           <li><img width="100px" draggable="true" src="images/Xyiomi.jpg" alt="Xyiomi"></li>
           <li><img width="100px" draggable="true" src="images/Violetine kurwa.jpg" alt="Violetine"></li>
        </ul>
        </div>
   </div>