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:

<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.

http://www.emawebdesign.com/wp-content/plugins/downloads-manager/img/icons/winzip.gif download: scriptaculous-dragedrop (74.69KB)
added: 25/10/2008
clicks: 1693
description: drag e drop con scriptaculous

NO SPAM. Non fornirò la tua email a terzi e riceverai solo contenuti che ti interessano sugli argomenti che tratto e potrai cancellarti quando vuoi con un link che trovi in tutte le email.