Rendere trascinabile un DIV con Script.aculo.us

Pubblicato il 25/10/2008 alle 18:40

Script.aculo.us drag e drop

Oggi vedremo come rendere trascinabile tramite drag & drop un DIV in una pagina HTML. Per rendere l’oggetto “draggable” utilizzeremo Script.aculo.us una delle più note librerie JavaScript con cui è possibile realizzare effetti, animazioni, controlli Ajax e altro ancora.

Per prima cosa scarichiamo la libreria da qui.

A questo punto decomprimiamo il pacchetto ZIP e includiamo i file scriptaculous.js e prototype.js, che trovate nelle cartelle src e lib, nel nostro file HTML:

Creiamo il nostro DIV (che avrà un immagine di sfondo) che chiameremo “content“:

<div id=”content” style=”background-image:url(images/drag.jpg); width:200px; height:100px;”></div>

Ora rendiamolo “draggable” con il seguente comando:

<script type=”text/javascript”>

new Draggable(‘content’);

</script>

Potete vedere una demo di questo esempio qui.