JAVASCRIPT SCRIPT
Drag and Drop javascript cross browser
In questo articolo vi illustrerò come creare l'effetto drag & drop in javascript compatibile con tutti i browser
(cross browser), attraverso lo script che ho implementato.
Riporto qui sotto i passaggi necessari, dopo aver scaricato il file javascript, per creare il drag and drop.
Questo script javascript per il drag and drop è rilasciato sotto
licenza MIT.
DOWNLOAD DEMO
IMPLEMENTAZIONE HTML
Nella parte superiore della vostra pagina all'interno del tag head includete il file javascript che avete scaricato.
- <script type="text/javascript" src="drag_drop.js"></script>
Create ora all'interno del body i seguenti elementi:
• un div che farà da contenitore che dovrà avere la proprietà position settata a relative;
• all'interno del div contenitore tutti gli elementi che vorrete draggare con la proprietà
position settata a absolute (nell'esempio ho usato 2 div colorati);
Da ricordare che sia il div contenitore che tutti gli elementi al suo interno devono avere un id identificativo
che verrà utilizzato poi nel richiamo della funzione del drag and drop.
- <div id="area_drag" style="position:relative; width:900px; height:600px; background-color:#CCC; margin-left:50px;">
- <div id="oggetto_drag1" style="position:absolute; top:150px; left:150px; width:100px; height:100px; background-color:#06C;"></div>
- <div id="oggetto_drag2" style="position:absolute; top:250px; left:300px; width:100px; height:100px; background-color:#093;"></div>
- </div>
IMPLEMENTAZIONE JAVASCRIPT
É sufficiente fare un'istanza della classe presente nel file javascript passando come parametro l'id del div contenitore e un'array con tutti gli id degli elementi che dovranno essere draggati.
- <script type="text/javascript">
- new DragAndDrop("area_drag",new Array("oggetto_drag1","oggetto_drag2"));
- </script>
Dopo aver eseguito questi semplici passaggi avrete implementato il vostro drag and drop javascript cross browser.
Per segnalarmi dei problemi o se hai dei suggerimenti per migliorare questo lavoro mandami una
mail
.