Script ajax: Drag and drop con scriptaculous

   difficoltà:  script script script script script

Demo
Download
Script simili
20/10/2006


Con questo esempio riprodurremo la possibilità di muovere le finestre della home page personalizzata di google. Avremo 3 colonne e sarà possibile spostare i 3 elementi di ciascuna colonna in un'altra colonna, oppure cambiare semplicemente l'ordine in una colonna.
Il risultato sarà quello qua sotto rappresentato:

ajax drag and drop

ajax drag and drop

ajax drag and drop

ajax drag and drop

Scaricate dal sito http://script.aculo.us/ la libreria scriptaculous. Prendiamo tutti i file contenuti nelle cartelle lib e src. Mettiamoli in una cartella ajax in modo da avere tutti gli script nella stessa cartella.
Vediamo ora lo script.
Innanzitutto includiamo la libreria ajax nel file dragndrop.htm.
Il div container conterrà tre div colonna larghi uguali. In ognuno di essi sarà presente un elenco (ul) i cui membri (li) saranno ordinabili e spostabili. Con le poche righe javascript in fondo diremo che ognuna delle liste è ordinabile.
Sortable.create("firstlist",
{dropOnEmpty:true,handle:'handle',containment:["firstlist","secondlist","thirdlist"],constraint:false,
});
Vediamo ora cosa succede:
Sortable.create crea un lista ordinabile "firstlist" (id della lista)
     
dropOnEmpty:true dice che è possibile inserire elementi anche se la lista è vuota
     
handle:'handle' dice che la parte draggabile è solo quella con classe handle ( se non presente è draggabile tutto l'item)
     
containment:["firstlist","secondlist","thirdlist"] gli oggetti di firstlist sono spostabili in tutti gli elenchi elencati tra parentesi quadre
     
constraint:false gli elementi sono spostabili. se impostato a true sono fissi.
     
Ecco il file dragndrop.htm:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Drag and drop</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="ajax/prototype.js" type="text/javascript"></script>
<script src="ajax/scriptaculous.js" type="text/javascript"></script>
<script src="ajax/unittest.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>

<div class="container">
<div class="colonna">
<ul class="sortabledemo" id="firstlist">
<li class="item" id="firstlist_firstlist1">
<div class="handle">TITOLO 1/1</div> Contenuto 1 lista 1.
</li>
<li class="item" id="firstlist_firstlist2">
<div class="handle">TITOLO 2/1</div> Contenuto 2 lista 1.
</li>
<li class="item" id="firstlist_firstlist3">
<div class="handle">TITOLO 3/1</div> Contenuto 3 lista 1.
</li>
</ul>
</div>
<div class="colonna">
<ul class="sortabledemo" id="secondlist">
<li class="item" id="secondlist_secondlist1">
<div class="handle">TITOLO 1/2</div> Contenuto 1 lista 2.
</li>
<li class="item" id="secondlist_secondlist2">
<div class="handle">TITOLO 2/2</div> Contenuto 2 lista 2.
</li>
<li class="item" id="secondlist_secondlist3">
<div class="handle">TITOLO 3/2</div> Contenuto 3 lista 2.
</li>
</ul>
</div>
<div class="colonna">
<ul class="sortabledemo" id="thirdlist">
<li class="item" id="thirdlist_thirdlist1">
<div class="handle">TITOLO 1/3</div> Contenuto 1 lista 3.
</li>
<li class="item" id="thirdlist_thirdlist2">
<div class="handle">TITOLO 2/3</div> Contenuto 2 lista 3.
</li>
<li class="item" id="thirdlist_thirdlist3">
<div class="handle">TITOLO 3/3</div> Contenuto 3 lista 3.
</li>
</ul>
</div>
</div>


<script type="text/javascript">
// <![CDATA[
Sortable.create("firstlist",
{dropOnEmpty:true,handle:'handle',containment:["firstlist","secondlist","thirdlist"],constraint:false,
});
Sortable.create("secondlist",
{dropOnEmpty:true,handle:'handle',containment:["firstlist","secondlist","thirdlist"],constraint:false,
});
Sortable.create("thirdlist",
{dropOnEmpty:true,handle:'handle',containment:["firstlist","secondlist","thirdlist"],constraint:false,
});
// ]]>
</script>

</body>
</html>
Di seguito invece il foglio di stile style.css:
body{
font: 10px verdana;
}

div.container{
width:780px;
margin: 0px auto 0px;
overflow: hidden;
}

div.colonna{
float:left;
width:240px;
padding:10px;
}

ul.sortabledemo {
min-height:150px;
width:200px;
}

li.item {
height:50px;
border:1px solid #5788AF;
background-color: #A7C6DF;
list-style-type: none;
margin-left:-40px;
margin-bottom:15px;
}

div.handle {
width: 100%;
background-color: #5788AF;
color:white;
cursor: move;
}
Vedremo in seguito come salvare la posizione delle finestre per potervi accedere in seguito.




Commenti


  M4rc

26/2/2008 18:02:27

Bellissimo questo script! Un problema... ma questo script funziona solo con le liste (ul e li)??? risp


  M4rc

26/2/2008 19:47:45

In particolare a me servirebbe con un normale contenitore come il div... sapete aiutarmi???




Lascia un commento


Codice di controllo*:
Nome*:
Email/Link:
Testo*:
 
I campi contrassegnati con * sono obbligatori.