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 .