Rendere trascinabile un DIV con Script.aculo.us

Pubblicato il 25 Ottobre 2008

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:

<script src=”lib/prototype.js” type=”text/javascript”></script>
<script src=”src/scriptaculous.js” type=”text/javascript”></script>

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.

Autore: emawebdesign

Full Stack Developer, SEO Specialist, esperto della trasformazione digitale con oltre 20 anni di esperienza.

Pubblicato in: