Script ajax: Drag and drop scriptaculous con memoria posizione in asp

   difficoltà:  script script script script script

Download
Script simili
24/7/2007


In molti mi hanno chiesto di riprodurre con l'uso di asp lo script per il drag and drop con ajax e script.aculo.us:
Script ajax: Drag and drop scriptaculous con aggiunta finestre e memoria posizione
riproducendo le parti dinamiche scritte in php in asp.

Avremo quindi le solite 3 colonne e sarà possibile spostare i 3 elementi di ciascuna colonna in un'altra, oppure cambiare l'ordine in una colonna. Questo script 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
Script ajax: Drag and drop scriptaculous con aggiunta finestre e memoria posizione

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) asp 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


  Paolo

12/8/2007 12:43:14

Finalmente in asp, grazie!!

  Robyline

10/12/2007 14:37:26

Grazie, funziona a meraviglia.
Ho solo qualche problema perché ho elementi di varie altezze.
Nel CSS come posso modificare l'altezza in modo dinamico?

li.item {height:298px; ......

Grazie

  Fabio

10/12/2007 14:39:32

Se non metti l'altezza dovrebbe prenderla in automatico

  Robyline

10/12/2007 15:34:44

Avevo già provato e non mi funzionava.
Ma ho capito perché:
all'interno dell'elemento avevo posizionato un div che era position:absolute. Mi é bastato porlo a position:relative e tutto é andato a posto.
Grazie mille.

  Dario

17/10/2008 15:07:36

Ciao, complimenti per il sito e gli script, sono utilissimi!!
Solo che ho un problema con questo script: non riesco a mandare in esecuzione il file di salvataggio, non ho errori nè niente. solo non lo fa :( vero che ho modificato lo script e ho solo la firstlist nella quale ho degli elementi, ma questo non dovrebbe infierire. c'è qualcosa che posso aver dimenticato che non permette di eseguire il comando?

  lelardo

7/11/2008 17:49:51

anche io ho problemi con i <li>
io ho messo una serie di div all'interno ( due per l'header della finestra ed uno che contiene la pagina che richiamo) solo che in explorer il <li> sembra allargrasi da solo in firefox invece no.. ora provo a mettere posizion:relative ai vari div all'interno come suggerito da robyline ma non sono molto fiducioso

  Angelo

13/11/2008 11:41:52

Molto carino davvero.. Io stavo cercando qualcosa di simile.. Ma di un po' + complicato.. Volevo dividere 2 tipi di oggetti. 1) contenitore 2) oggetto. Quindi la possibilità di prendere l'oggetto e metterlo nel contenitore. Basterebbe che l'evento di rilascia sull'oggetto mandi in esecuzione un file asp con ID_Oggetto + ID_Contenitore
Qualcuno sa di qualcosa di simile già fatto?
Ciaooo

  splintercell

14/6/2009 23:12:38

esiste uno script dove i contenuti vengono presi da db e le posizioni salvate su db?

Bello script comunque.
Ciau

  splintercell

17/6/2009 18:28:23

Questo script è buggato: se muovi l'ultimo campo rimanente di qualsiasi colonna in testa alla colonna 2 o alla colonna 3 inzia a cancellare le caselle infatti se aggiorni la pagina le caselle scompaiono.

  Andrea

7/1/2010 19:23:28

Ciao, volevo chiederti, nel caso in cui si volesse mettere il tutto in una tabella?ho fatto una prova ma lo script si blocca e non fa nulla.Ci sarebbe una soluzione?grazie



Lascia un commento


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