Script ajax: Drag and drop con scriptaculous

difficoltà:

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:

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;
}