<?
session_start();
//array elementi -> possono anche essere presi da database
$elemento[1]['titolo']="TITOLO 1";
$elemento[1]['contenuto']="Contenuto 1.";
$elemento[2]['titolo']="TITOLO 2";
$elemento[2]['contenuto']="Contenuto 2.";
$elemento[3]['titolo']="TITOLO 3";
$elemento[3]['contenuto']="Contenuto 3.";
$elemento[4]['titolo']="TITOLO 4";
$elemento[4]['contenuto']="Contenuto 4.";
$elemento[5]['titolo']="TITOLO 5";
$elemento[5]['contenuto']="Contenuto 5.";
$elemento[6]['titolo']="TITOLO 6";
$elemento[6]['contenuto']="Contenuto 6.";
$elemento[7]['titolo']="TITOLO 7";
$elemento[7]['contenuto']="Contenuto 7.";
$elemento[8]['titolo']="TITOLO 8";
$elemento[8]['contenuto']="Contenuto 8.";
$elemento[9]['titolo']="TITOLO 9";
$elemento[9]['contenuto']="Contenuto 9.";
//controllo cookie
if(!isset($_COOKIE['cookie_colonna1']) && !isset($_COOKIE['cookie_colonna2']) && !isset($_COOKIE['cookie_colonna3'])){
setcookie ( "cookie_colonna1","1,2,3",time()+2592000);
setcookie ( "cookie_colonna2","4,5,6",time()+2592000);
setcookie ( "cookie_colonna3","7,8,9",time()+2592000);
$array_colonna1=array(1,2,3);
$array_colonna2=array(4,5,6);
$array_colonna3=array(7,8,9);
}else{
if(isset($_COOKIE['cookie_colonna1'])){
$array_colonna1=explode(",",$_COOKIE['cookie_colonna1']);
}else{
$array_colonna1=Array();
}
if(isset($_COOKIE['cookie_colonna2'])){
$array_colonna2=explode(",",$_COOKIE['cookie_colonna2']);
}else{
$array_colonna2=Array();
}
if(isset($_COOKIE['cookie_colonna3'])){
$array_colonna3=explode(",",$_COOKIE['cookie_colonna3']);
}else{
$array_colonna3=Array();
}
}
?>
<!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>Script ajax: Drag and drop con scriptaculous e salvataggio posizione</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" />
<script>
var arraytitoli = new Array();
var arraycontent = new Array();
<?for($el=1;$el<=count($elemento);$el++){?>
arraytitoli.push('<?=$elemento[$el]['titolo']?>');
arraycontent.push('<?=$elemento[$el]['contenuto']?>');
<?}?>
function crea(elemento){
if(!$('firstlist_key'+elemento) && !$('secondlist_key'+elemento) && !$('thirdlist_key'+elemento)){
newitem=Builder.node( 'li', {className:'item',id:'firstlist_key'+elemento});
newtitle=Builder.node( 'div', {className:'handle'},arraytitoli[elemento-1]);
newchiudi=Builder.node( 'div', {className:'chiudi'});
newlink=Builder.node( 'a', {href:'java-script:rimuovi('+elemento+')', className:'chiudilink'},'x');
newitem.appendChild(newtitle);
newitem.appendChild(newchiudi);
newchiudi.appendChild(newlink);
$('firstlist').appendChild(newitem);
$('firstlist_key'+elemento).innerHTML=$('firstlist_key'+elemento).innerHTML+arraycontent[elemento-1];
var myAjax = new Ajax.Request("save.php", {method:'get',parameters:Sortable.serialize('firstlist')+"&"+Sortable.serialize('secondlist')+"&"+Sortable.serialize('thirdlist')});
rendisortable();
}
}
function rimuovi(elemento){
if($('firstlist_key'+elemento)){$('firstlist_key'+elemento).parentNode.removeChild($('firstlist_key'+elemento));}
if($('secondlist_key'+elemento)){$('secondlist_key'+elemento).parentNode.removeChild($('secondlist_key'+elemento));}
if($('thirdlist_key'+elemento)){$('thirdlist_key'+elemento).parentNode.removeChild($('thirdlist_key'+elemento));}
var myAjax = new Ajax.Request("save.php", {method:'get',parameters:Sortable.serialize('firstlist')+"&"+Sortable.serialize('secondlist')+"&"+Sortable.serialize('thirdlist')});
rendisortable();
}
function rendisortable(){
// <![CDATA[
Sortable.create("firstlist",
{dropOnEmpty:true,handle:'handle',containment:["firstlist","secondlist","thirdlist"],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:["firstlist","secondlist","thirdlist"],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:["firstlist","secondlist","thirdlist"],constraint:false,
onUpdate:function(){var myAjax = new Ajax.Request("save.php", {method:'get',parameters:Sortable.serialize('firstlist')+"&"+Sortable.serialize('secondlist')+"&"+Sortable.serialize('thirdlist')}); }});
// ]]>
}
</script>
</head>
<body onload="rendisortable()">
<?for($el=1;$el<=count($elemento);$el++){?>
<a href="java-script:crea('<?=$el?>')"><?=$elemento[$el]['titolo']?></a>
<?}?>
<div class="container">
<div class="colonna">
<ul class="sortabledemo" id="firstlist">
<?
for($elementi=0;$elementi<count($array_colonna1);$elementi++){
?>
<li class="item" id="firstlist_key<?=$array_colonna1[$elementi]?>">
<div class="handle"><?=$elemento[$array_colonna1[$elementi]]['titolo']?></div>
<div class="chiudi"><a href="java-script:rimuovi(<?=$array_colonna1[$elementi]?>)" class="chiudilink">x</a></div>
<?=$elemento[$array_colonna1[$elementi]]['contenuto']?>
</li>
<?
}
?>
</ul>
</div>
<div class="colonna">
<ul class="sortabledemo" id="secondlist">
<?
for($elementi=0;$elementi<count($array_colonna2);$elementi++){
?>
<li class="item" id="secondlist_key<?=$array_colonna2[$elementi]?>">
<div class="handle"><?=$elemento[$array_colonna2[$elementi]]['titolo']?></div>
<div class="chiudi"><a href="java-script:rimuovi(<?=$array_colonna2[$elementi]?>)" class="chiudilink">x</a></div>
<?=$elemento[$array_colonna2[$elementi]]['contenuto']?>
</li>
<?
}
?>
</ul>
</div>
<div class="colonna">
<ul class="sortabledemo" id="thirdlist">
<?
for($elementi=0;$elementi<count($array_colonna3);$elementi++){
?>
<li class="item" id="thirdlist_key<?=$array_colonna3[$elementi]?>">
<div class="handle"><?=$elemento[$array_colonna3[$elementi]]['titolo']?></div>
<div class="chiudi"><a href="java-script:rimuovi(<?=$array_colonna3[$elementi]?>)" class="chiudilink">x</a></div>
<?=$elemento[$array_colonna3[$elementi]]['contenuto']?>
</li>
<?
}
?>
</ul>
</div>
</div>
</body>
</html>