[jquery] liste annidate draggabili

[LoRdCoStE]

Salve a tutti.
Premetto che non sono un esperto di javascript.

Per la gestione di un menu (dinamico) sto cercando di realizzare uno script per che permetta di spostare (drag & drop) degli elementi di una lista annidata (con infiniti livelli teorici).
Una volta spostati i vari elementi deve essere possibile serializzare i dati del menù, in particolare:
id della voce
ordine della voce
id_padre della voce

Questi dati serializzati vengono successivamente passati ad uno script PHP che si occupa di aggiornare la struttura del menu salvandola sul DB.

Ho trovato su internet due script già pronti.
Il primo permette di spostare in modo corretto tutti gli elementi della lista.
Il secondo è un'implementazione basata sul primo script che aggiunge la possibilità di serializzare i dati.

Il problema è che nel secondo script per introdurre la serializzazione è stato creato un piccolo bug nel sistema di drag & drop.

Vi posto il link con una demo del secondo script e vi spiego come riprodurre il bug:
http://jquerystuff.net/random/nested-sortable/

per riprodurre il bug:
Spostare "Item 12" e renderlo sotto-elemento di "Item 11". (fin qui tutto ok)
Ora provate a spostare "Item 10" sotto "Item 11" rendendolo un sotto-elemento (il problema è proprio che non dovreste riuscirci).

Posto anche un'immagine esplicativa:


Nel primo script (quello senza serializzazione) il problema non si verifica.
Vi metto anche il link del primo script per chi volesse verificare:
http://www.gimiti.com/kltan/demo/jTree/

Confrontando i due script sono riuscito a trovare la parte di codice che crea problemi:

/*Codice funzionante del primo script */
else if (e.pageX > off.left + opts.childOff) {
    $(".jTreePlacement").remove();
    if ($(this).find("ul").length == 0)
        $(this).append('<ul>'+str+'[/list]');
    else
        $(this).find("ul").prepend(str);
}
*/

/* codice con serializzazione che crea problemi */
else if (e.pageX > off.left + opts.childOff) {
    $(".jTreePlacement").remove();
    if ($(this).find("ul").length == 0){
        var newVal = $(this).prev("li").next("li").attr("id").split("item_");     // new line
        $(this).append('<ul id="parent-'+newVal[1]+'">'+str+'[/list]');                     // amended code
    }else{
        $(this).find("ul").prepend(str);
        }
} 

La differenza è ben visibile nelle due righe commentate.
Il problema è che quelle due righe sono indispensabili per la serializzazione.
Eppure quell prev().next() non mi convince moltissimo :/
Qualcuno ha qualche idea su come si potrebbe risolvere?
Oppure avete in mente un modo alternativo per serializzare?

Sono consapevole di aver scritto un post lungo ma ritengo che questo script una volta sistemato possa essere utile a molti, rigrazio in anticipo chiunque darà un'occhiata al codice.
Saluti Stefano

[LoRdCoStE]

uppettino

[LoRdCoStE]

up

[homezappa]

Ci si riesce, eccome!
Ok, con un po' di difficoltà in più rispetto allo spostare un elemento lungo l'albero, ma, con qualche accortezza, ci si riesce!
(vedi immagine)

Zappa

[LoRdCoStE]

Originariamente inviato da homezappa
Ci si riesce, eccome!
Ok, con un po' di difficoltà in più rispetto allo spostare un elemento lungo l'albero, ma, con qualche accortezza, ci si riesce!
(vedi immagine)

Zappa

Il fatto è che intendevo mettere "Item 10" come sottoelemento di "Item 12", quindi non al suo stesso livello.

Item11
--Item12
----Item10

comunque il topic non va visto in senso letterale, infatti sono anche riuscito nell'intento di posizionare gli elementi in quel modo, ma non direttamente.
Nel senso che giocando un po' con gli elementi alla fine si riesce ad ottenere ciò che si voleva, il problema è che dovrebbe funzionare semplcemente ed ugualemnte con tutti gli elementi.
Ad ogni modo grazie per la risposta, e se hai qualche suggerimento su come risolvere è ben accetto.

[marmo79]

Ciao , ho realizzato qualcosa di moolto simile appoggiandomi a scriptacoulous; se cerchi l'effetto Sortable sul loro sito c'è quello che fa al caso tuo con tanto di serialize ed esempio di interfaccia al database. Tutto funziona alla grande, anche se mi sembra di aver dovuto usare qualche accortezza per creare nuovi sottoelementi quando l'elemento principale non ne contiene già.(in pratica,se non ci sono sottoelementi ne aggiungo uno invisibile con un nome di classe differente che non interferisce col serialize.)
Se cambi parrocchia (libreria...) fammi sapere e ti do una mano se hai problemi

[LoRdCoStE]

Originariamente inviato da marmo79
Ciao , ho realizzato qualcosa di moolto simile appoggiandomi a scriptacoulous; se cerchi l'effetto Sortable sul loro sito c'è quello che fa al caso tuo con tanto di serialize ed esempio di interfaccia al database. Tutto funziona alla grande, anche se mi sembra di aver dovuto usare qualche accortezza per creare nuovi sottoelementi quando l'elemento principale non ne contiene già.(in pratica,se non ci sono sottoelementi ne aggiungo uno invisibile con un nome di classe differente che non interferisce col serialize.)
Se cambi parrocchia (libreria...) fammi sapere e ti do una mano se hai problemi

Ciao grazie per la risposta.
Ho dato un'occhiata alla wiki di scriptacoulos e ho trovato un link questo:

http://zenofshen.com/posts/ajax-sortable-lists-example

Questo esempio però si basa solo su una lista non annidata senza sotto elementi.
Intendevi questo?

Ad ogni modo non mi importa dover cambiare la parte javascript, l'importante è che si possa adattare alla struttra del menu che già creo tramite php e mysql, per questioni di tempo non posso permettermi di toccare anche quella.
Saluti

[marmo79]

intendevo quella;se scarichi scriptacolous tra gli esempi ce ne è uno con tanto di lista annidatissima che fa al caso tuo...

[marmo79]

questo è il link al codice della pagina dell'esempio che ti dicevo
qui