Pubblicato da 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;"> </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