martedì 22 agosto 2017

Trascinare un oggetto in Javascript (Drag & Drop)

Con javascript e l'html5 è possibile anche trascinare oggetti in modo da creare pagine interattive.
E' infatti possibile creare degli elementi catturabili con il mouse e trascinabili in specifici punti dello schermo, raggiunti i quali è possibile generare poi diverse azioni.

Ad esempio, imparando ad usare bene queste funzionalità, unite al potentissimo ajax, è anche possibile creare dei software per l'assegnazione dei posti (es per la gestione degli eventi).
Se ad esempio hai una sala con diverse file e posti, potresti crearti una sorta di video piantina con i div html, ed utilizzare una lista di nomi trascinabili sui vari posti a sedere.
Lasciando poi un nominativo con il mouse nel rispettivo posto, potrai far scatenare una chiamata ad uno script php o asp, in modo tale che il posto assegnato a video venga anche salvato nel database.

Non so se sono riuscito a spiegare bene le potenzialità del drag & drop javascript, comunque vediamo subito un po' di codice.


Come trascinare un oggetto in Javascript con il Drag & Drop


Ecco un esempio di codice script utilizzabile per poter compiere questa di trascinamento oggetti su schermo in una pagina web:

<html>
<head>
    <title>Drag & Drop Javascript</title>
    <script>
    function dropattivo(evento)
    {
        evento.preventDefault();
    }
    function drag(evento)
    {
        evento.dataTransfer.setData("text", evento.target.id);
    }
    function drop(evento)
    {
        evento.preventDefault();
        var data = evento.dataTransfer.getData("text");
        evento.target.appendChild(document.getElementById(data));
    }
    </script>
</head>
<body>
<div id="destinazione" ondrop="drop(event)" ondragover="dropattivo(event)" style="width:400px;background:#FF0000;">&nbsp;</div>
<span id="datrascinare" draggable="true" ondragstart="drag(event)">Trascinami</span>
</body>
</html>

 
Copia ed incolla tutto il codice in una pagina html vuota e prova ad eseguire la pagina con un browser.
Potrai trascinare la scritta nel box rosso e lasciarla posizionata lì.

Le nozioni base da imparare sono:
draggable="true"
Attributo da mettere a tutti gli oggetti da trascinare.

E poi le rispettive funzioni javascript che gestiscono l'evento, da mettere sia sull'oggetto da trascinare, che sull'elemento di destinazione.
Penso che lo script si spieghi da solo e non necessiti di ulteriori spiegazioni, ma nel caso chiedete pure nei commenti.

Come dicevo poco sopra, con questo metodo del javascript trascina oggetti si apre un mondo, ed è possibile sviluppare applicazioni interattive che vanno da software web elaborati, ad anche videogiochi in html.

Piaciuto l'articolo? Lascia un commento!

EmoticonEmoticon