Drag e Drop: Sviluppo PHP e MySql riprendere posizioni

02-09-2009, 22.08.34

Per i moderatori:
Ho evitato di ripescare la disscusione precedente (Curiosita sui drag e drop) poichè si trovava in un'altra categoria

Ecco qui cosa sono riuscito a fare sotto le indicazioni di dementialsite, ma non riesco a capire come prelevare i dati dal database, ringrazio tutti coloro che mi aiuteranno...:

tab

CREATE TABLE `blocchi` (
`id_utente` INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`colonna_1` TEXT NOT NULL ,
`colonna_2` TEXT NOT NULL ,
`colonna_3` TEXT NOT NULL
) ENGINE = MYISAM ;

save.php

Codice PHP:


<?
session_start();
if(isset($_GET['firstlist'])){$firstlist=$_GET['firstlist'];}else{$firstlist=Array();}
if(isset($_GET['secondlist'])){$secondlist=$_GET['secondlist'];}else{$secondlist=Array();}
if(isset($_GET['thirdlist'])){$thirdlist=$_GET['thirdlist'];}else{$thirdlist=Array();}

$colonna1=str_replace("key","",implode(",",$firstlist));
$colonna2=str_replace("key","",implode(",",$secondlist));
$colonna3=str_replace("key","",implode(",",$thirdlist));

  //conessione al database
  require('config.ini.php');
  
 $query="INSERT INTO tab (colonna1,colonna2,colonna3) VALUES ('$colonna1','$colonna2', '$colonna3')";
 if(!mysql_query($testo,$dbh)) /*eseguo la query e controllo se va a buon fine ^^*/
     die("<h1>".mysql_error()."</h1>");
     mysql_close($db_nome);
?>

index.php

Codice PHP:


<?
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
$query = mysql_query("SELECT * FROM tab");
if(!$query){ die('Errore: non riesco a eseguire la query'); }
/*************

COME FACCIO A RICHIAMARE LA POSIZIONE???

*************/



?>
<!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 salvataggio posizione</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <script src="js/blocchi/prototype.js" type="text/javascript"></script>
  <script src="js/blocchi/scriptaculous.js" type="text/javascript"></script>
  <script src="js/blocchi/unittest.js" type="text/javascript"></script>
  <link rel="stylesheet" type="text/css" href="css/blocchi/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:'javascript: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="javascript:crea('<?=$el?>')"><?=$elemento[$el]['titolo']?></a> &nbsp;&nbsp;
<?}?>

<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="javascript: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="javascript: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="javascript:rimuovi(<?=$array_colonna3[$elementi]?>)" class="chiudilink">x</a></div>
                <?=$elemento[$array_colonna3[$elementi]]['contenuto']?>
            </li>
            <?
            }
            ?>
        </ul>
    </div>
</div>
 </body>
 </html>

03-09-2009, 10.04.32

mysql_fetch_array + while().

Codice PHP:


$query = mysql_query("SELECT * FROM tab WHERE id = "); // hai bisogno dell'id dell'utente
if(!$query){ die('Errore: non riesco a eseguire la query'); }

while($r = mysql_fetch_array($query, MYSQL_ASSOC)) {
         print_r($r);
}

03-09-2009, 20.24.07

si, funziona fino ad un certo punto perche mi dice:

Notice: Undefined variable: array_colonna1 in /membri/zomer/www/prova/sposta_blocchi.php on line 109

Notice: Undefined variable: array_colonna2 in /membri/zomer/www/prova/sposta_blocchi.php on line 124

Notice: Undefined variable: array_colonna3 in /membri/zomer/www/prova/sposta_blocchi.php on line 139

CREDO che le variabili non corrispondano come posso rimediare?

vabè ecco la apgina modificata! { le altre la pagina di salvataggio e sempre uguale, quella di spora... }

index.php

Codice PHP:


<?
error_reporting(E_ALL); 
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.";

//conessione al database
     require('config.ini.php');

$query = mysql_query("SELECT * FROM tab "); /* WHERE id = per nn fare un unica tab metti il where è l'id utente */
if(!$query){ die('Errore: non riesco a eseguire la query'); }

while($r = mysql_fetch_array($query, MYSQL_ASSOC)) {
         print_r($r);
}



?>
<!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 salvataggio posizione</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <script src="js/blocchi/prototype.js" type="text/javascript"></script>
  <script src="js/blocchi/scriptaculous.js" type="text/javascript"></script>
  <script src="js/blocchi/unittest.js" type="text/javascript"></script>
  <link rel="stylesheet" type="text/css" href="css/blocchi/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:'javascript: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="javascript:crea('<?=$el?>')"><?=$elemento[$el]['titolo']?></a> &nbsp;&nbsp;
<?}?>

<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="javascript: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="javascript: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="javascript:rimuovi(<?=$array_colonna3[$elementi]?>)" class="chiudilink">x</a></div>
                <?=$elemento[$array_colonna3[$elementi]]['contenuto']?>
            </li>
            <?
            }
            ?>
        </ul>
    </div>
</div>
 </body>
 </html>

13-09-2009, 14.29.09

(e scomparso il tasto edita)

Salve, nokia senti ho rpovato a fare come hai datto tu ma mi stampa l'arry e non mi mostra i blocchi, come puoi vedere stesso tu qui

ecco il codice:

Codice PHP:


<?
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.";

  //conessione al database
  require('../../../config.ini.php');

$query = mysql_query("SELECT * FROM tab "); // WHERE id = per fare un unica tab metti il where è l'id utente
if(!$query){ die('Errore: non riesco a eseguire la query'); }

while($r = mysql_fetch_array($query, MYSQL_ASSOC)) {
         print_r($r);
}
?>
<!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 salvataggio posizione</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <script src="prototype.js" type="text/javascript"></script>
  <script src="scriptaculous.js" type="text/javascript"></script>
  <script src="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:'javascript: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="javascript:crea('<?=$el?>')"><?=$elemento[$el]['titolo']?></a> &nbsp;&nbsp;
<?}?>

<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="javascript: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="javascript: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="javascript:rimuovi(<?=$array_colonna3[$elementi]?>)" class="chiudilink">x</a></div>
                <?=$elemento[$array_colonna3[$elementi]]['contenuto']?>
            </li>
            <?
            }
            ?>
        </ul>
    </div>
</div>
 </body>
 </html>

13-09-2009, 14.36.56

Ma quello era solo un esempio!
In $r hai tutti i dati estratti dal database...

13-09-2009, 17.00.02

si beh lo capito, vedendo quella query, comunque come posso fare in modo che i risultati estratti mi aggiustino le tabelle?

EDIT

ho provato a fare cosi

Codice PHP:


<?
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.";

  //conessione al database
  require('../../../config.ini.php');

$query = mysql_query("SELECT * FROM tab "); // WHERE id = per fare un unica tab metti il where è l'id utente
if(!$query){ die('Errore: non riesco a eseguire la query'); }
$risu = mysql_fetch_array($query);   

$array_colonna1 = "".$risu['colonna1']."";
$array_colonna2 = "".$risu['colonna2']."";
$array_colonna3 = "".$risu['colonna3']."";
?>
<!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 salvataggio posizione</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <script src="prototype.js" type="text/javascript"></script>
  <script src="scriptaculous.js" type="text/javascript"></script>
  <script src="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:'javascript: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="javascript:crea('<?=$el?>')"><?=$elemento[$el]['titolo']?></a> &nbsp;&nbsp;
<?}?>

<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="javascript: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="javascript: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="javascript:rimuovi(<?=$array_colonna3[$elementi]?>)" class="chiudilink">x</a></div>
                <?=$elemento[$array_colonna3[$elementi]]['contenuto']?>
            </li>
            <?
            }
            ?>
        </ul>
    </div>
</div>
 </body>
 </html>

ma non va... COMUNQUE PERCHE' MI SALVA UN SACCO DI RGHE NEL DB E' UNA COSA ESAGERATA!!! MI SALVA OGNI SPOSTAMENTO?

24-09-2009, 19.03.20

Ho ancora fatto alcune modifche ma ancora non funziona...

Codice PHP:


<?
error_reporting(E_ALL);
session_start();
//array elementi -> possono anche essere presi da database
$elemento[1]['titolo']="TITOLO 1/1";
$elemento[1]['contenuto']="Contenuto 1 lista 1.";
$elemento[2]['titolo']="TITOLO 2/1";
$elemento[2]['contenuto']="Contenuto 2 lista 1.";
$elemento[3]['titolo']="TITOLO 3/1";
$elemento[3]['contenuto']="Contenuto 3 lista 1.";

$elemento[4]['titolo']="TITOLO 1/2";
$elemento[4]['contenuto']="Contenuto 1 lista 2.";
$elemento[5]['titolo']="TITOLO 2/2";
$elemento[5]['contenuto']="Contenuto 2 lista 2.";
$elemento[6]['titolo']="TITOLO 3/2";
$elemento[6]['contenuto']="Contenuto 3 lista 2.";

$elemento[7]['titolo']="TITOLO 1/3";
$elemento[7]['contenuto']="Contenuto 1 lista 3.";
$elemento[8]['titolo']="TITOLO 2/3";
$elemento[8]['contenuto']="Contenuto 2 lista 3.";
$elemento[9]['titolo']="TITOLO 3/3";
$elemento[9]['contenuto']="Contenuto 3 lista 3.";

  //conessione al database
  require('config.ini.php');

$query = mysql_query("SELECT * FROM tab "); // WHERE id = per fare un unica tab metti il where è l'id utente
if(!$query){ die('Errore: non riesco a eseguire la query'); }
$risu = mysql_fetch_array($query);

if(!isset($risu['colonna1']) && !isset($risu['colonna2']) && !isset($risu['colonna3'])){  
    
    $array_colonna1=array("1","2","3");
    $array_colonna2=array("4","5","6");
    $array_colonna3=array("7","8","9");  
    
                   } else {
              
 if(isset($risu['colonna1'])){
    $array_colonna1=explode(",",$risu['colonna1']);
    }else{
    $array_colonna1=Array();
    }
    if(isset($risu['colonna2'])){
    $array_colonna2=explode(",",$risu['colonna2']);
    }else{
    $array_colonna2=Array();
    }
    if(isset($risu['colonna3'])){
    $array_colonna3=explode(",",$risu['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="prototype.js" type="text/javascript"></script>
  <script src="scriptaculous.js" type="text/javascript"></script>
  <script src="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">
            <?
            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> <?=$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> <?=$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="secondlist_key<?=$array_colonna3[$elementi]?>">
                <div class="handle"><?=$elemento[$array_colonna3[$elementi]]['titolo']?></div> <?=$elemento[$array_colonna3[$elementi]]['contenuto']?>
            </li>
            <?
            }
            ?>
        </ul>
    </div>
</div>
 <script type="text/javascript">
 // <![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>
 </body>
 </html>

EDIT:

ma al posto di questa parte che mi crea una array enorme non potri mettere un link con get?

Codice PHP:


<script type="text/javascript">
 // <![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>

EDIT2:

ho provato ad eliminare quella parte è a mettere un link cosi

<a href="http://www.sito.com/pagina.php?firstlist=firstlist&secondlist=secondli st&thirdlist=">SALVA</a>

ma poi non si muovono più i blocchi!...

Discussione: Drag e Drop: Sviluppo PHP e MySql riprendere posizioni

LinkBack

Strumenti discussione

Display

Drag e Drop: Sviluppo PHP e MySql riprendere posizioni

Regole di scrittura