Script ajax: Drag and drop con scriptaculous in orizzontale

   difficoltà:  script script script script script

Demo
Download
Script simili
11/9/2007


Abbiamo visto nello script:
Script ajax: Drag and drop scriptaculous con aggiunta finestre e memoria posizione
come, avendo 3 colonne, spostare i 3 elementi di ciascuna colonna in un'altra colonna, oppure cambiare semplicemente l'ordine in una colonna. Lo script permetteva anche l'aggiunta e rimozione delle finestre e la possibilità di ricordare la posizione delle finestre aperte tramite cookies.
Mi è stato però richiesto da qualcuno se era possibile disporre gli elementi in modo orizzontale permettendo solo lo spostamento degli elementi per riga.

In questo script tratterò le sole modifiche necessarie per rendere i box orizzontali e far si che il drag and drop degli elementi possa avvenire solo sulla medesima riga.
Per capire queste modifiche è necessario, per chi non lo avesse già fatto leggere tutti gli script che precedono questo relativamente ad drag and drop:

Script ajax: Drag and drop con scriptaculous
Script ajax: Drag and drop con scriptaculous e salvataggio posizione
Script javascript: Aggiungere elementi a una pagina web
Script ajax: Aggiungere elementi a una pagina web con scriptaculous
Script ajax: Aggiungere e rimuovere elementi ordinabili con scriptaculous
Script ajax: Drag and drop scriptaculous con aggiunta finestre e memoria posizione

Per rendere i box orizzontali basterà agire sul css, dovremo infatti allargare il contenitore delle liste <ul> e posizionare le voci delle lista in orizzontale, dando come proprietà float:left. Dovremo quindi modificare un pò tutti i contenitori per renderli più larghi e facendo andare a capo le colonne (che ora diventeranno righe).

In particolare le voci da modificare saranno:

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

div.colonna{
width:800px;
padding:10px;
}

ul.sortabledemo {
height:60px;
width:750px;
}

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

Con questa modifica avremo 3 righe che conterranno i vari box draggabili.

Per costringere il drag and drop sono riga per riga dovremo modificare nel file home.php nella funzione rendisortable() le voci:
containment:["firstlist", "secondlist", "thirdlist"]

che dicono che ogni elemento può essere spostato in qualunque contenitore (firstlist, secondlist, thirdlist) e dicendogli invece che gli elementi della firstlist potranno essere spostati solo all'interno di essa:
containment:["firstlist"]

e così per tutte le altre liste:
function rendisortable(){
Sortable.create("firstlist",
{dropOnEmpty:true,handle:'handle',containment:["firstlist"],constraint:false,
onUpdate:function(){var myAjax = new Ajax.Request("save.php", {method:'get',parameters:Sortable.serialize('firstlist')+"&"+Sortable.serialize('secondlist')+"&"+Sortable.serialize('thirdlist')}) }});
Sortable.create("secondlist",
{dropOnEmpty:true,handle:'handle',containment:["secondlist"],constraint:false,
onUpdate:function(){var myAjax = new Ajax.Request("save.php", {method:'get',parameters:Sortable.serialize('firstlist')+"&"+Sortable.serialize('secondlist')+"&"+Sortable.serialize('thirdlist')}) }});
Sortable.create("thirdlist",
{dropOnEmpty:true,handle:'handle',containment:["thirdlist"],constraint:false,
onUpdate:function(){var myAjax = new Ajax.Request("save.php", {method:'get',parameters:Sortable.serialize('firstlist')+"&"+Sortable.serialize('secondlist')+"&"+Sortable.serialize('thirdlist')}); }});
}

Nella funzione crea() dobbiamo invece dire che se creiamo un elemento nuovo questo dovrà andare non più in fondo alla prima lista:
$('firstlist').appendChild(newitem);

Ma dovrà andare nella prima riga, o nella seconda o nella terza a seconda della sua posizione originale:
if(elemento<=3){
$('firstlist').appendChild(newitem);
}else if(elemento>3 && elemento<7){
$('secondlist').appendChild(newitem);
}else if(elemento>=7){
$('thirdlist').appendChild(newitem);
}

Questo è tutto. Per avere lo script già bello che pronto vi consiglio di scaricare il file cliccando sulla voce Download.




Lascia un commento


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