Script ajax: Drag and drop scriptaculous con aggiunta finestre e memoria posizione

   difficoltà:  script script script script script

Demo
Download
Script simili
23/1/2007


Questo script si pone a conclusione di una serie di script  atti a riprodurre l'home page personalizzata di google, in cui 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. Questo script finale permette l'aggiunta e rimozione delle finestre e la possibilità di ricordare la posizione delle finestre aperte tramite cookies.
Per capire a fondo tutti i passaggi consiglio la lettura dei precedenti passaggi:

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

Il risultato sarà quello qua sotto rappresentato:

ajax drag drop scriptaculous

Visto che questo script mette insieme tutti gli elementi dei tutorial sopra citati vi lascio alla lettura di quelli per carpire l'uso dei singoli elementi e vado qui a spiegare come sono messi insieme tutti gli elementi.

La prima parte dello script crea un array ($elemento) php con tutti gli elementi (titolo e contenuto) dei box disponibili. Questo è fatto poichè i dati potrebbero venire da un database. Subito dopo controllo dal cookie quali dati box sono effettivamente posizionati nelle colonne 1,2,3 e li metto in rispettivi array($array_colonna1, $array_colonna2, $array_colonna3).
Nel body del documento inserisco gli elementi trovati nel cookie in ognuna delle 3 colonne cliccando tra gli array. Al caricamento della pagina con la funzione rendisortable() rendo le liste ordinabili.
Vedi:
Script ajax: Drag and drop con scriptaculous
Script ajax: Drag and drop con scriptaculous e salvataggio posizione

Cliccando sul menu in alto vengono aggiunti gli elementi alla prima colonna tramite la funzione crea() a cui è passato l'indice dell'array del box da aggiungere. Tramite l'uso di builder, controllando prima che l'elemento non esista già, viene creato l'elemento da aggiungere in ogni sua parte: barra titolo, tasto chiusura e contenuto. Questo elemento viene aggiunto al termine della prima colonna, e poi viene richiamata la funzione rendisortable() per aggiornare la lista e renderla ordinabile.
Vedi: Script ajax: Aggiungere elementi a una pagina web con scriptaculous

Cliccando sul tasto 'x' viene richiamata la funzione chiudi() che rimuove l'elemento dalla pagina, poi viene richiamata la funzione rendisortable() per aggiornare la lista e renderla ordinabile.
Vedi: Script ajax: Aggiungere e rimuovere elementi ordinabili con scriptaculous

Per ottenere il codice finale scaricatelo dal link download.




Commenti


  Daweb

29/1/2007 10:23:40

Ciao, ti faccio i complimenti innanzitutto per tutte queste risorse che metti a disposizione.
E ora vengo al problema. Vorrei utilizzare questo utilissimo script per il drag & drop per riordinare una lista di 5 immagini stampate a video dopo la lettura da DB.
Quindi, salvare nel DB il nuovo ordine della lista. I cookie quindi escono di scena. Solo che non saprei da dove cominciare.
Se puoi darmi una mano, grazie.
PS. Le immagini sono al massimo 5.

  Fabio

29/1/2007 10:35:24

Lo script è organizzato prprio in modo tale da poter essere riutilizzato in questo senso. Le modifiche che devi fare sono queste:

Nel file save.php invece che scrivere il cookie inserisci i valori di $colonna1 (avrai una sola colonna immagino) in un campo del database. La variabile $colonna1 contiene l'ordine delle immagini (in questo caso l'id delle immagini che prenderai da un altra tabella del db).

Nel file home.php come vedi i dati che vengono presi per essere inseriti nei box sono array. Questo è stato fatto apposta per poter facilmente modificare lo script affinchè questi array saran proprio i dati presi poi dal database, e invece che prendere i dati delel colonne dal cookie le prelevi dal database.



  daweb

29/1/2007 11:09:15

Ok, grazie per le dritte. Ci stavo giusto lavorando e credo di essere riuscito a risolvere il quibus. :-)

Grazie 1000!

  daweb

29/1/2007 11:24:17

Un'ultima cosa. Scusa... Se volessi ordinarli per riga, agisco semplicemnte sul CSS?!

  Fabio

29/1/2007 11:30:16

in linea di massima si..devi far si che le liste ordinate <ul> e gli oggetti <li> invece che esser messi uno sotto l'altro siano affiancati..

  daweb

29/1/2007 16:46:00

Devo disturbarti ancora, scusami.

Per ora funziona tutto come voglio, sono riuscito a piazzare gli elementi inline come volevo.

Ora ho il problema di cancellare dal DB un elemento. Ovviamente funziona la scomparsa dell'elemento, ma vorrei eliminarlo anche dal DB, solo che non riesco a passare la chiamata ajax.

Sorry...


function rimuovi(elemento){
if($('firstlist_key'+elemento)){$('firstlist_key'+elemento).parentNode.removeChild($('firstlist_key'+elemento));}
var myAjax = new Ajax.Request("deleteItem.php", {method:'get',parameters:Sortable.serialize(elemento)});
rendisortable();
}


  Fabio

29/1/2007 17:08:35

ummm... allora dipende un po' come hai strutturato il database. Se segui l'esempio iniziale basterebbe che fai tutto in save.php. hai l'elenco degli id presenti nella lista. Se tu prima di aggiornare il campo, prelevi gli id presenti in precedenza puoi dire che se l'elemento vecchio non è più presente nella nuova lista è da cancellare. Questo è la prima possibilità.

Se invece vuoi usare un altro file deleteItem.php sbagli a passare i parametri. Infatti Sortable.serialize('firstlist') restituisce un array di elementi presenti nella lista. Se vuoi passare solo un valore dovrai passare


var myAjax = new Ajax.Request("deleteItem.php", {method:'get',parameters:"elemento="+elemento});

così passi via get la variabile 'elemento' alla pagina deleteItem.php

  daweb

29/1/2007 18:00:40

... sono uno stupido... funziona tutto alla grande.

Grazie 1000

  Hannibal

6/5/2007 19:01:31

complimenti per per il sito!!
ottimo questo script ma ho un problema.
sulla mia macchina utilizzo il kerio personal firewall che impedisce il corretto funzionamento dello script e in particolare non funziona il Drag and drop, la finestra draggata non si riposiziona nella posizione corretta dopo lo spostamento e da quel momento non funziona + nulla.
hai riscontrato questo problema? ho provato a disabilitare tutta la parte relativa ai cookies ma non ho risolto, grazie ciao

  Hannibal

6/5/2007 19:02:49

dimenticavo....
chiaramente se disabilito il firewall, funziona tutto correttamente.
Saluti

  Hannibal

6/5/2007 19:07:17

scusami ancora... ho appena provato con opera e funziona correttamente anche con il firewall attivo, con internet explorer e firefox con il firewall attivo non funziona!!

  Fabio

6/5/2007 19:16:38

umm...no questa mi è nuova..Sinceramente uso un altro firewall e non ho avuto problemi.Ma hai notato problemi simili su siti in cui è presente drag and drop o uso di ajax o no?

Non funziona + nulla ma ti da qualche errore?

C'è qualche opzione che blocca gli script o chiamate asincrone?


  Hannibal

6/5/2007 19:54:35

smanettando nelle impostazioni del firewall, disabilitando la voce "Abilita filtro web" funziona tutto correttamente, resta il mistero per cui con opera funziona anche con il filtro abilitato e che con tutti gli altri script ajax che utilizzo, non ho mai avuto problemi. spero non ne abbiano i navigatori del nuovo sito che utilizzera il Tuo script. approposito... appena lo termino ti faccio avere il link, magari metto un collegamento al tuo sito da dove ho tirato fuori altri script molto interessanti.
complimenti ancora per le risorse che condividi, spero di trovare script nuovi ogni giorno.
Saluti
Hannibal

  Fabio

6/5/2007 20:04:37

Il fatto è che alcuni sistemi antivirus e firewall a volte esagerano un pò nel livello di protezione. Non so se tale funzione sia attiva di default, mi auguro di no. A volte può essere utile alzare per qualche motivo il livello di sicurezza, ma solitamente saranno gli utenti più esperti a farlo e saranno consapevoli di ciò e che qualche non funzionamento potrebbe dipendere da quello.
Ad esempio che io sappia anche il norton antivirus col blocco script blocca i referrer delle pagine per cui i redirect alla pagina precedente vengon bloccati.

In bocca al lupo per il tuo nuovo sito allora ;-)

  Sergio

15/7/2007 1:37:26

Ciao!
Sinceri complimenti per la funzionalità delle tue routine in PHP/Ajax.
Domanda: Ma con classic ASP ..funziona tutto?
Mi spiego meglio:
Volevo utilizzare le funzionalità del drag x implementare una funzione di gestione del layout di un sito web (..purtroppo realizato in ASP). Quindi ho trasformato le routine da PHP in ASP ..e devo dire che tutto funziona alla grande ..MA NON il salvataggio delle impostazioni.
Infatti Sortable.serialize('xxxlist') mi restituisce una stringa VUOTA. Ti assicuro che ho provato altri metodi ..per esempio utilizzando direttamente XMLHttpRequest e funge ...
Ma non riesco a prelevare le liste da Sortable ..sono vuote!

E un problema di ASP oppure ho tralasciato qualche cosa che devo obbligatoriamente inserire in ASP ..che ne so un FORM?

  Sergio

15/7/2007 1:50:07

Scusa.. dimenticavo, esiste un altro metodo per prelevare le liste?

  Fabio

15/7/2007 20:58:56

Sortable.serialize('xxxlist') è javascript per cui funziona sia in asp che php. Probabilmente c'è qualche errore o nella parte iniziale in cui ci sono gli array di elementi o nella pagina che riceve gli elementi. Ricorda che gli elementi vengono inviati alla pagina save via querystring e non post(magari puo' essere quello?).
Se non riesci a risolvere prova a inviarmi lo script dappa sezione collabora.

  sergio

17/7/2007 7:25:47

..Grazie!
Ho analizzato tutti i passaggi e sono ok. In effetti la stringa del Sortable.serialize('xxxlist') non è vuota ..perchè l'ho visualizzata con un Alert(xxx) ..e mi restituisce "firtlist[]=key1...etc". ..forse Ho capito!!!
firstlist[]= .... le parentesi quadre!!!

  sergio

17/7/2007 7:50:16

Infatti!!
..era solo un problema di ..Parentesi quadre "[ ]" ..le avevo omesse.
Tutto risolto grazie!
Saluti

  Giuseppe

7/9/2007 1:54:03

Ciao, inanzitutto complimenti per il bellissimo script e per la spiegazione semplicissima. seguendo le vostre discussioni sono riuscito a perfezionare lo script ed a ottenere quello che volevo. Mi resta solo una cosa. come posso fare per ingrandire l'aria sensibile che mi permette di spostare gli oggetti sino ai tag dei contenuti?

Grazie e Complimenti ancora !

  Fabio

7/9/2007 9:19:23

@Giuseppe:
Ciao! Allora, tutto quello che sta dentro:


<div class="handle"></div>

E' draggabile. Infatti hai:

Sortable.create("firstlist", {dropOnEmpty:true,handle:'handle',containment:["firstlist","secondlist","thirdlist"],constraint:false,
});


In particolare la voce:

handle:'handle'


se modifichi in

handle:'item'


dovresti rendere draggabile tutti i div con class='item' (invece di handle)

  Giuseppe

7/9/2007 13:33:11

ah ok ti ringrazio per la spiegazione, faccio un test e ti faccio sapere.

ciao e grazie !

  Giuseppe

10/9/2007 18:36:08

Ciao, un'altra cosa, vorrei ordinare le liste per riga anzichè per colonna. Ho letto le istruzioni fra i vari commenti ma non ho capito dove precisamente devo agire. Potresti per favore essere più preciso?

Ti ringrazio molto

ciao

  Fabio

10/9/2007 20:38:50

guarda non ho mai provato e con esattezza non saprei dirti. Il tutto sta comunque nel lavorare sul css e fare in modo che le liste <li> invece che essere messe in verticale siano orizzontali. Potrebbe bastare mettere nel css nel li float:left.

  Giuseppe

10/9/2007 21:11:53

mhmh.....no putroppo non è cosi semplice avevo già provato... non so cosa fare...

  Fabio

10/9/2007 21:22:10

guarda con uno script semplice in cui c'è solo la lista e gli dici float left li mette in orizzontale. Probabilmente devi giocare anche sulla larghezza del contenitore. chiaramente il contenitore dovrà essere lungo almeno per farci stare 3 box orizzontali se no andranno a capo. Appena ho un attimo provo con lo script.

  Giuseppe

10/9/2007 21:37:11

Si anche io ero arrivato a questa deduzione. ma non va lo stesso non rieso a capire...

  Fabio

10/9/2007 22:08:14

@Giuseppe:
E' come ti ho detto ho provato. Ti ho scritto una mail per anticiparti il codice, poi farò un post, ma vedo che nei 2 commenti c'è una mail diversa..

  Fabio

13/9/2007 10:53:42

Ho aggiunto un post sul drag and drop con i box in orizzontale

  Angelo

17/7/2008 10:24:10

Ciao a tutti,

ho un problema. Se provo a fare una select nel db e inserisco nell'array elemanto[1][contenuto] un valore lungo mi va in palla. Se però faccio uno str_replace togliendi /r /n funziona.

Seconda cosa: se provo ad inserire in un elemento dell'array un <img src.....ecc ecc mi si vede l'immagine nel blocco ma non mi fa più il drag e drop e neanche la funziona rimuovi riesce ad andare.

Nell'esempio senza chiusura dei box funziona. Nell'esempio con chiusura e riapertura dei box no. Cosa può essere?

Grazie mille.

  LOLLA

13/9/2009 17:13:52

Ciao! ti faccio i complimenti, ma ti volevo chiedere dove posso trovare lo script con il salvattio nel db?



Lascia un commento


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