Vediamo una strada abbastanza semplice ma molto utile per la gestione di elementi Drag&Drop all'interno di una pagina HTML. pensandoci, le potenzialità sono innumerevoli, dato che possiamo implementare in questo modo un gioco, di tipo "browser game".

Gli aspetti chiave per implementare il Drag&Drop sono:

ID elemento da trascinare (nel mio caso l'ho chiamato #esempio e tramite CSS ho messo come background-image il logo di Ethical Hacking Forum; in alternativa si può includere qualunque immagine esterna oppure seguire la procedura Includere immagine SVG all'interno del file HTML+CSS)
ID contenitori ( #box1, #box2) vale a dire dei contenitori, box in cui trascinare l'elemento di esempio (che noi creiamo in modo statico tramite codice HTML)
quattro funzioni JavaScript:
- dragStart() --> riguarda l'ID dell'elemento da trascinare
- dragEnd() --> riguarda l'ID dell'elemento da trascinare
- dragOver() --> riguarda l'ID dell'elemento contenitore
- drop() --> riguarda l'ID dell'elemento contenitore

Vediamo ora il codice completo (anche con un minimo di istruzioni CSS):

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }
    .container {
      width: 100px;
      height: 100px;
      border: 2px solid black;
      padding: 10px;
      display: inline-block;
    }
    #esempio {
      width: 80px;
      height: 60px;
      background-image: url("https://ethicalhacking.freeflarum.com/assets/logo-nasf5b1b.png");
      cursor: grab;
    background-repeat: no-repeat;
    }
  </style>
</head>
<body>
  <div class="container" id="box1">
    <div id="esempio" draggable="true"></div>
  </div>
  <div class="container" id="box2"></div>
  <script>
    const esempio = document.getElementById('esempio');
    const box1 = document.getElementById('box1');
    const box2 = document.getElementById('box2');

    esempio.addEventListener('dragstart', dragStart);
    esempio.addEventListener('dragend', dragEnd);
for(let i=1;i<=2;i++){
    document.getElementById("box"+i).addEventListener('dragover', dragOver);
    document.getElementById("box"+i).addEventListener('drop', drop);
}

    function dragStart(e) {
      e.dataTransfer.setData('text/plain', e.target.id);
      e.target.style.opacity = '0.5';
    }

    function dragEnd(e) {
      e.target.style.opacity = '1';
    }

    function dragOver(e) {
      e.preventDefault();
    }

    function drop(e) {
      e.preventDefault();
      const data = e.dataTransfer.getData('text/plain');
      e.target.appendChild(document.getElementById(data));
    }
  </script>
</body>
</html>

L'esempio è semplice e consiste in due contenitori ( #box1 e #box2) con l'elemento #esempio da trascinare, grazie alle funzioni JavaScript implementate. Come detto si tratta di un esempio semplice per capirne il funzionamento, le potenzialità poi sono infinite! Vediamo nell'immagine che segue, a sinistra il risultato di questo esempio (appunto mentre viene trascinato il logo, per spostarlo da uno all'altro contenitore) mentre a destra un progetto ben più ambizioso, la scacchiera per il gioco della Dama (tramite Drag&Drop di fatto si possono trascinare le pedine e quindi giocare una partita, in locale). Per ora mi interessava chiarire il funzionamento in modo da permettere a tutti di creare la struttura di un'implementazione di questo tipo e poi gestire grafica e funzionalità a piacere. Applicazioni con esempi più interessanti e completi arriveranno nel seguito! 😀

Drag&Drop-HTML-JavaScript-esempi

Fondatori