Script ajax: Drag and drop con scriptaculous e salvataggio posizione

   difficoltà:  script script script script script

Demo
Download
Script simili
24/10/2006


Questo script riprende Script ajax: Drag and drop con scriptaculous. In questo script avevamo visto come spostare e ordinare i contenuti in 3 colonne, ora vedremo come poter salvare la posizione nuova in modo tale che alla prossima apertura della pagina ci ritroveremo gli elementi nella stessa posizione in cui li abbiamo lasciati.

ajax drag and drop

Per salvare la posizione al momento useremo i cookies, chiaramente si potrebbe anche decidere di salvare i dati in un database se gli utenti sono regisrati.
Mettiamo innanzitutto gli elementi in un array cosi da poter usare in seguito l'esempio anche per risultati estratti da database.
All'apertura della pagina controlliamo se esiste il cookie altrimenti lo creiamo e inseriamo gli elementi nella posizione standard. Nei cookies quindi salviamo tre variabili cookie_colonna1, cookie_colonna2, cookie_colonna3. Queste variabili contengono l'elenco delle key dell'array degli elementi presenti in ogni colonna in ordine di visualizzazione.
Creiamo la variabile cookie_colonna1 che contiene gli elementi $elemento[1], $elemento[2], $elemento[3] in quest'ordine:
setcookie ( "cookie_colonna1","1,2,3",time()+2592000);
Le inseriamo poi nell'array che contiene gli elementi presenti nella relativa colonna:
$array_colonna1=explode(",",$_COOKIE['cookie_colonna1']);
Una volta ottenuti i dati per ogni colonna faremo un ciclo sull'array di ciascuna colonna per visualizzare i dati in ordine.
In coda c'è il javascript che crea la lista ordinabile:
Sortable.create("firstlist",
{dropOnEmpty:true,handle:'handle',containment:["firstlist","secondlist","thirdlist"],constraint:false,
});
Alla funzione vista nell'esempio precedente aggiungiamo la funzione che permette di salvare i dati nel cookie:
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')}) }});
onUpdate alla modifica della posizione di un elemento della colonna invia una richiesta al file php save.php che preleva i dati in ordine e li salva in un cookie.
Ecco il file dragndrop.php:
<?
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.";

//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></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">
<?
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>
Nel file save.php prelevo i dati ricevuti dalla pagina precedente, che invia via get l'array dei dati nelle 3 colonne in formato key1,key2... per avere il solo indice elimino 'key' e salvo l'ordine nel cookie.
Ecco il file save.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));

setcookie ( "cookie_colonna1",$colonna1,time()+2592000);
setcookie ( "cookie_colonna2",$colonna2,time()+2592000);
setcookie ( "cookie_colonna3",$colonna3,time()+2592000);

?>





Commenti


  Dante

13/11/2006 12:41:45

Ciao!
Nello script che passa gli array c'è un piccolo problema:
Non passa tutti i valori... ne passa solo 1 per array, quindi se cambi l'ordine e ricarichi la pagina visualizzi solo l'ultimo box per ogni colonna...

  Fabio

13/11/2006 14:28:25

Strano... a me non da errori come puoi vedere nella demo.
Prova a sostituire la parte finale dello script cosi':


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


In questo modo dovresti vedere quali sono effettivamente i dati che lo script passa alla pagina php come querystring.
La querystring dovrebbe essere di questo tipo:

firstlist[]=key3&firstlist[]=key2&secondlist[]=key1&secondlist[]=key5&secondlist[]=key4&secondlist[]=key6&thirdlist[]=key7&thirdlist[]=key8&thirdlist[]=key9

passando quindi tutti i dati.
Se cosi fosse il problema potrebbe risiedere nel file php quando preleva i dati inviati via querystring.
Avevo infatti notato in passato una diversità nel prelevare dati inviati via get o post di array a seconda delle impostazioni del server.
Nel mio caso

$firstlist=$_GET['firstlist'];

riconosce che $firstlist[] inviato via get è un array, nel tuo caso potrebbe non essere così.

In questo caso prova con
$firstlist[]=$_GET['firstlist'];

Fammi sapere se hai risolto.

  Dante

13/11/2006 17:23:51

Innanzi tutto grazie della risposta!
Avevo gia' controllato i valori.
Ti espongo il tutto:

1)I dati inviati mi sembrano giusti.
2)$firstlist in effetti lo vedo come array, ma contiene solo 1 dato

L'unica cosa che mi e' venuta in mente e' che sovrascrive i valori...

Ovvero:
legge il primo valore "key1"
scrive il valore in $firstlist, quindi $firstlist=key1
legge il secondo valore "key2"
sovrascrive il valore key1 di $firstlist con quello nuovo
quindi mi trovo con $firstlist=key2 invece che $firstlist=key1,key2

Ora provo a crearmi una pagina php per verificare il comportamento nella ricezione via $_GET/$_POST di array e cose simili...
Parto da lontano dato che non ho mai inviato array in questo modo..

Dante

  Fabio

13/11/2006 17:35:30

Nel file php fai scrivere l'output in un file di testo così puoi controllare il valore di ogni dato. Peccato che non riesco a provare poichè a me non da problemi di ricezione dell'array.
Cerco di trovare il server su cui avevo avuto in passato il problema cosi faccio dei test..
Chiaramente se ci arrivi prima tu..se posti la soluzione te ne sarei grato.

  Fabio

13/11/2006 17:51:06

Se provi a fare questo che succede?
index.php:


<form action="output.php">
<input type="text" name="ArrayOK[]" value="a1">
<input type="text" name="ArrayOK[]" value="a2">
<input type="text" name="ArrayOK[]" value="a3">
<input type="submit">
</form>


output.php:

<?
$post_dati=$_GET['ArrayOK'];
print_r($post_dati);
?>


Che risultato ti da? A me:

Array ( [0] => a1 [1] => a2 [2] => a3 )

Quindi prende correttamente l'array.

  Dante

13/11/2006 18:02:30

La stessa cosa

  Fabio

13/11/2006 20:26:58

Umm... se il risultato è lo stesso dovrebbe funzionarti correttamente anche lo script per il drag and drop..
$firstlist=$_GET['firstlist'];
dovrebbe prendere anche in quel caso l'array correttamente.
Senti ti invio via mail lo script completo prova a vedere se ti da ancora problemi.

  Dante

15/11/2006 9:59:56

Ciao Fabio!
Prima di tutto grazie mille!
Lo script che mi hai inviato funziona...
Guardo le differenze e poi, nel caso, ti dico

ps: scusa il ritardo, ieri non potevo

  Fabio

15/11/2006 11:10:21

Perfetto.
Non appena possibile inserisco anche il download dei file.

  Francesco

19/12/2006 23:07:21

E se io volessi inserire due opzioni come nella gestione delle cartelle di ridurre il box (-) o chiuderlo (x) come nella pagina di google?

  Fabio

20/12/2006 0:21:15

Beh è possibile.. certo che si complica un po' la situazione. In particolare per memorizzare lo stato box ridotto. Per chiuderlo si puotrebbe ad occhio usare builder per aggiungere/rimuovere elementi alle colonne. Diciamo che qui in poche righe è difficile spiegare tutto, ma mi ripropongo di fare un post sul builder per aggiungere/eliminare elementi di una pagina html e poi con l'uso di quello continuare questo script permettendo la chiusura e la riduzone del box..

  Fabio

20/12/2006 0:24:16

Dimenticavo..se hai fretta perchè ti serve realizzarlo a breve posso darti una dritta. Per ora dai un'occhio qui:
http://javascript.html.it/guide/lezione/811/loggetto-document/

  Fabio

22/12/2006 17:16:38

Ho apportato una modifica allo script. Mi sono accorto di un piccolo problema con i cookie nel caso una colonna rimanesse vuota.

  dejan

20/4/2007 21:03:18

ciao Fabio!!
la tua funzionalità è proprio quello che cercavo e vorrei adattarla alla mia applicazione...nel mio caso però devo prendere delle immagini(oppure degli id che le rappresentano) dal database!! come fare??

  Fabio

20/4/2007 21:09:58

Come vedi all'inizio dello script i dati con cui riempire i box sono presi da array. Basta quindi a inizio script prelevare i dati da database e inserirli in un array. Cosa che bene o male è già quasi fatta..

  dejan

21/4/2007 14:53:14

Fabio, grazie tanto!!

in effetti ho fatto una domanda stupida!!
l'altra volta avevo solo scaricato il codice e fatto funzionare!!
andavo molto di fretta, poi leggendomi un pò la specifica si capisce chiaramente!!

Più che altro ti scrivo per farti i complimenti per il sito!!
Ben fatto e ricco di informazioni(ti ci sto facendo molta pubblicità)

Sei un grande!!
ciao ciao!!




  michele

12/5/2007 21:38:23

Ciao,
ho provato il drag&drop con il salvataggio delle posizioni e tutto funziona a meraviglia sia se inserisco la cartella ajax come viene richiesto, sia se la stessa cartella la ometto.
A cosa serve allora scriptaculous??

  Fabio

12/5/2007 22:02:20

Michele, quello che tu dici mi par improbabile. Nel senso che sicuramente senza la cartella ajax visualizzi correttamente i box, nella posizione salvata.. ma il drag and drop non puoi farlo. Ti direbbe (ho provato ora):
Sortable is not defined
Fa infatti parte della libreria script.aculo.us

  michele

13/5/2007 2:52:09

Ciao Fabio,
a me succede che con Explorer il drag non riesco a farlo invece con firefox tutto continua a funzionare anche senza la cartella ajax!!!

Quindi dalla tua risposta precedente mi sembra di aver capito che script.aculo.us serve solo per il drag&drop e invece non ha niente a che fare con il salvataggio della posizione. Giusto??
Faccio questa domanda perchè io ho un mio drag&drop e devo capire come salvare la posizione. Sono alle prime armi, spero che dal tuo esempio riesco a risolvere il problema.
Grazie per la disponibilità!!
ciao ciao

  Fabio

13/5/2007 10:09:38

Io ho provato con firefox e non funziona. Questo è naturale perchè le funzioni usate fanno parte della libreria script.aculo.us. Prova a vedere che magari non lo carichi dalla cache.
Per il resto è come dici tu. Script.aculo.us viene usata solo per il drag and drop.
Il sistema funziona brevemente cosi: All'inizio in php creo 3 array che contengono i contenuti dei box delle 3 colonne. All'inizio sono standard, ma poi controllo se c'è un cookie. se c'è un cookie prelevo da li il contenuto delle 3 colonne. e le visualizzo.

Con il codice js a fondo pagina rendo ordinabili con drag and drop le colonne (usando script.aculo.us). Facendo attenzione che però quando avviene lo spostamento (onUpdate) invio i dati con l'ordine delle colonne alla pagina save.php (in modo asincrono). Questa pagina si occupa di salvare nel cookie la posizione dei box nelle colonne, cosi che ricaricando in futuro la pagina prelevi l'ordine da li.

  michele

13/5/2007 14:38:21

In effetti veniva caricato dalla cache...svuotandola non funziona un bel niente!!
grazie mille per la dritta!!
appena ho un pò di tempo provo a fare quella cosa, nel caso avessi problemi......!!!

ciao ciao



  Manu

29/6/2007 19:46:45

Ciao io ho provato ad utilizzare il drag and drop e tutto funziona; il problema sorge quando utilizzo la onupdate che nn mi va a eseguire il file php... ti incollo il codice


Sortable.create("firstlist",
{
handle:'sbihead', constraint:false,
onUpdate:function(){
var myAjax = new Ajax.Request("index.php?t=logged&req=save", {
method:'get', parameters:Sortable.serialize('firstlist')
})
}
});

dove sbaglio? :-\

  Fabio

1/7/2007 20:59:19

@ Manu, guarda io proverei cosi:


Sortable.create("firstlist",
{
handle:'sbihead', constraint:false,
onUpdate:function(){
var myAjax = new Ajax.Request("index.php", {
method:'get', parameters:Sortable.serialize('firstlist')+"&t=logged&req=save"
})
}
});


Magari non prende i valori querystring passati alla pagina, ma li devi mettere come parametri nella funzione Ajax.Request.
Fammi sapere se cosi funziona

  Davide

23/7/2007 16:00:59

ciao
complimenti per il sito...
ma se ti va prova a fare lo stesso magari pero che si salvi da un database con asp....
mi piacerebbe vedere come tu lo faresti x'è io ci ho provato e non ci sono riuscito...hehe

ciao e complimenti x il sito

  Fabio

24/7/2007 16:09:32

@Davide:
Visto che non sei il primo a chiedermelo sto preparando il codice per asp che pubblichero' in settimana

  Fabio

24/7/2007 21:46:34

Ecco la versione in ASP;
Drag and drop scriptaculous con memoria posizione in asp

  Aldo

17/10/2007 16:26:13

Ciao Fabio e complimenti per il sito :D
(anche se possono sembrare 'complimenti di rito' ti assicuro che sono sinceri, visto che vi ho trovato tantissime cose che non conoscevo e che ho approfondito grazie al tuo sito).

Ho una domanda:
Con scriptaculous ho notato che è possibile eseguire il drag & drop di un div in una posizione "libera" cioè non vincolata ad una colonna o posizione specifica.
Ora mi chiedevo se fosse possibile spostare un div in una posizione X della pagina e salvare questa posizione per poterla ricaricare in un secondo momento o ad esempio ricaricando la pagina.

Ciao, Aldo.

  Fabio

17/10/2007 17:27:05

Allora..provo giusto a darti qualche suggerimento.
Crei l'oggetto draggabile, e gli dici: quando finisci di muoverlo prendi la posizione. E la posizione la salvi nei cookie o db, come in questo esempio.


<div class="sortabledemo" id="firstlist" style="width:200px;background-color:#ccc;position:absolute;">
contenuto
</div>

<script type="text/javascript">
new Draggable('firstlist',{
onEnd: function (dragObj, event) {
//invece di fare l'alert salva nei cookie, magari con ajax come esempio
alert(document.getElementById("firstlist").style.top);
}
});
</script>



  Aldo

18/10/2007 9:17:48

Grazie Fabio :D

Il tuo è stato un prezioso aiuto alla causa. Ora provo ad andare avanti da solo...

Ciao, Aldo

  Francis

2/11/2007 15:21:41

Lo script funziona in modo eccellente, quindi complimenti a tutti;
sono riuscito anche a registrare le posizioni in database tramite PHP ed a richiamamare il tutto....

dovrei risolvere però un problema....

Vorrei fare in modo che quando sposto da una colonna ad un'altra un DIV, quest' ultimo vada a sostituirsi a quello su cui si rilascia il mouse.... per capirci ... preparando un sitema di preimpaginazione via internet di un giornale ho delle posizioni obbligate, quindi 3 colonne con 4 elementi (articoli) per ciascuna... spostando un div da una colonna ad un'altra devono comunque rimanere sempre 3 colonne con 4 elementi per ciascuna...mentre attualmente si aggiungono ad una colonna per toglierle all'altra..
Ho visto l'esempio più vicino a quello che dico presso http://wiki.script.aculo.us/scriptaculous/page/print/SortableFloatsDemo
ma vorrei inserire la stessa logica nel vostro script....

certo di un vostro aiuto....
Buon lavoro a tutti
Francis

  Fabio

4/11/2007 10:02:44

@Francis:
Ciao, la soluzione che mi viene in mente è usare il drag and drop in orizzontale modificandolo in modo che il contenitore possa contenere al massiomo 3 elementi per riga (gli altri andranno a capo in automatico, tipo float left).

  Francis

7/11/2007 18:30:21

Grazie per il supporto....ci provo

  thomas

16/11/2007 0:50:36

Ciao,
volevo ringraziare per il preziosissimo aiuto che ho trovato su queste pagine. volevo scrivere un div che una volta draggata scrivesse la propria posizione in un file di testo e, pur non capendo un hacca di javascript e sistemi ajax, con il tuo sito ce l'ho fatta. Sono sicuro che il codice potrà servire a molti altri (come a fabio che voleva fare una cosa non molto diversa) e inizio a pubblicarne una bozza in stato primitivo.

nel javascript


new Draggable("ID-DIV",{
onEnd: function (dragObj, event) {
var myAjax = new Ajax.Request ('save_mod.php', {method:'get' ,parameters:'variabile='+document.getElementById("primobox").style.top
})

nel file php

$contenuto = $_GET['variabile'] ;
$apriw = fopen ("posizione.txt", "w");
fputs($apriw,$contenuto);
fclose($apriw);

Vi assicuro che solo per arrivare a questo è stata una fatica. Ma ora dovrebbe essere in discessa.

grazie mille ancora

Thomas

  thomas

16/11/2007 0:53:35

dimeticavo di dire (forse inutilmente) che ogni suggerimento è il benvenuto. e non fate caso a quel "mamma" alla fine che è rimasto li dopo innumerevoli prove di trasmissione della variabile dal javascript al php

Ariciao

Thomas

  Fabio

16/11/2007 9:22:27

grazie Thomas.
Ho tolto il 'mamma'...cosi per chi copia e incolla non va in confusione.

  thomas

5/12/2007 0:32:31

ciao ragazzi,
sono sempre io, quello dei post sopra... Allora dopo un bel po di tentativi sono riuscito a fare una pagina con due div entrambi draggabili! Lo script funziona, salva la posizione in un file di testo (ogni div ha un infatti un file senza estensione che si chiama con lo stesso id) e le richiama correttamente. e fino a qui tutto bene. Ora, l'ultimo passo che se no poi impazzisco, è quello di aumentare lo z-index dell'ultima div draggata in modo che sia in primo piano!
Ho provato un po di tutto e per il momento l'unica soluzione ragionabile mi sembra quello di usare una variabile (z) che aumenta ad ogni "dragaggio" . La variabile funziona ma non riesco a settare lo z-index della div.
Altra strada ho visto che scriptaculus usa prototype, e che questo ha una funzione "maximizeZ" ma non so bene come metterla nello script....
Sapete darmi qualche consiglio? grazie mille
Intanto vi posto i tre files, ricordatevi di creare una cartella "posizioni" con dentro files vuoti chiamati "firstbox" e "secondbox"
.

dragndrop_mod.php:


<?
//settiamo variabili et array
$script_css = " ";
$script_java = "var z = 10;";
$path = "posizioni/";
//apriamo la cartella path
$dh = opendir($path);
while (($nome_file = readdir($dh)) !== false) {
if($nome_file != "." && $nome_file != "..") {
//inizio del ciclo ripetuto per ogni file. Stampa il css con le ultime posizioni salvate nei file contenuti nella cartella path
$file = "posizioni/" . $nome_file;
$coo_file = fopen($file, "r");
$coordinate = fread($coo_file, filesize($file));
fclose($coo_file);
$coordinata= explode("-", $coordinate);
$posx = $coordinata[0];
$posy = $coordinata[1];
$script_css = $script_css . "
#" . $nome_file . "{ left: " . $posx . "px; top: " . $posy . "px;}";
$script_java = $script_java . "
new Draggable('$nome_file',{
handle:'handle',
onEnd: function (dragObj, event) {
var elemento = '$nome_file'
var myAjax = new Ajax.Request ('save_mod.php',{method:'get' ,parameters:'&elemento='+elemento+'&posx='+document.getElementById(elemento).offsetLeft+'&posy='+document.getElementById(elemento).offsetTop})
}
});";
//fine del ciclo
}
}
closedir($dh);
?>

<!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></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" />

<style type="text/css">

<?
echo $script_css;
?>

</style>
</head>
<body>

<div id="firstbox" >
<div class="handle">
firstbox
</div>
firstbox's content
</div>

<div id="secondbox" >
<div class="handle">
secondbox
</div>
secondbox's content
</div>

<script type="text/javascript">
// <![CDATA[

<?
echo $script_java;
?>

// ]]>
</script>

</body>
</html>


save_mod.php:

<?
$file = "posizioni/" . $_GET['elemento'];
$contenuto = $_GET['posx'] ."-" . $_GET['posy'];
$apriw = fopen ($file, "w");
fputs($apriw,$contenuto);
fclose($apriw);
?>

style.css

div.handle {
width: 100%;
background-color: #5788AF;
color:white;
cursor: move;
}
#firstbox {
position: absolute;
width: 200px;
height: 400px;
background-color: #999999;
color:white;
}
#secondbox {
position: absolute;
width: 200px;
height: 400px;
background-color: #9F9F9F;
color:white;
}

Lo script è rilasciato sotto licenza Attribuzione-Non commerciale-Condividi allo stesso modo 2.5 Italia

http://creativecommons.org/licenses/by-nc-sa/2.5/it/

Grazie ancora thomas

  Fabio

5/12/2007 9:26:30

Grazie per il contributo Thomas,
appena ho un attimo ci smanetto un po'.
Per lo z-index hai provato con:


document.getElementById(id).style.zIndex =n;


  Francesco

31/12/2007 18:30:08

semplicemente complimenti e grazie mille appena finirò l'applicazione che sto portando avanti vi farò vedere il risultato.

Grazie mille Fabio

  Raffaele

4/2/2008 15:05:50

Io ho un problema, lo script mi funziona con tutti i browser tranne che con explorer 6 (non ho provato altri IE), appare l icona per fare il drag ma non sposta niente e anche i titoli dei box compaiono con caratteri mancanti, cosa potrebbe essere

  Fabio

4/2/2008 15:13:52

@Raffaele:
mi pare strano. ma anche cliccando sulla demo fatta da me? hai provato a scaricare l'esempio dal download?

  Raffaele

4/2/2008 15:40:20

No non ho provato, riprovo con quello infatti mi sembr molto strano, spero di riuscire a sistemare questa cosa perchè questa libreria mi sembra molto potente, sono nuovo della programmazione ajax. Tra le altre cose ho appena riscontrato un altro problema, se provo a spostare per esempio il box 3/1 sotto il box 3/2 (usando anche il demo) non me lo fa fare, il box 3/1 draggato mentre viene spostato sotto il 3/2 sparise sotto lo sfondo bianco (è come se ci gli finisse sotto) e quindi li non lo posso mettere, se invece provo a metterlo tra il 2/2 e il 3/2 tutto funziona

  Filippo

26/7/2008 17:01:51

Ciao a tutti, ho un problema... se come nell'esempio in dowload il valore dell'array è un testo normale ($elemento[1]['contenuto']="Contenuto 1 lista 1.";) tutto funziona bene ma se provo ad inserire come valore una funzione in php come la seguente...

$elemento[1]['contenuto']=print ('Lore Ipsum');
(il print è solo un esempio)

...il testo da me scelto ('Lore Ipsum') non compare piu' nel box ma nel punto in cui si trova l'array, nel caso specifico quindi ad inizio pagina.

Come posso risolvere ?



  Lollo

31/8/2009 11:05:43

Ciao senti ti volevo chiedere cosa dovrei modificare per salvare i dati nel database...

  Giovanni

7/8/2010 21:19:58

a me compare :

There was a problem with the request.

quando clicco su ok! da cosa puo dipendere?



Lascia un commento


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