Rendere trascinabile un DIV con Script.aculo.us
1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading ... Loading ...



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:

<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: 264
description: drag e drop con scriptaculous

Google Buzz
Pubblicato in JavaScript,News,Programmazione,Scripts,Web 2.0 | Nessun commento »

Condividi


Realizzazione siti web



Altri articoli che potrebbero interessarti

Leave a Reply