Categorie
sviluppo tutorial

Drag and Drop con Javascript

Implementare il drag and drop su una pagina web tramite javascript fa molto web 2.0
Gli esempi che mi vengono in mente sono ben rappresentati del siti come questo, questo o questo

Anche i siti di commercio elettronico potrebbero trarre vantaggio da questa “tecnologia” rendendo un pò più interattiva e divertente la navigazione.
Sul script.aculo.us potete trovare un bellissimo esempio per un carrello web 2.0

Quando ho iniziato a cercare materiale sull’argomento ho trovato questo script su dynamic drive il cui studio mi ha portato a alla realizzazione di questa semplice demo .

Cliccando sull’icona “informazioni” vengono enumerati i prodotti all’interno del carrello, trascinandoli sopra vengono aggiunti e trascinandoli dal carrello al cestino vengono cancellati.

Le molte cose da dire per per raccontarvi come sono arrivato a “scoprire l’acqua calda” mi hanno portato alla decisione di preparare il mio primo post a puntate.

Questo che state leggendo consideratelo un introduzione mentre questi che seguono sono i titoli delle prossime puntate

  1. gli eventi relativi al movimento del mouse
  2. intercettare l’elemento sotto il mouse
  3. portare a spasso gli elementi ( prendere e lasciare )
  4. assembliamo il tutto

Update: 25.11.2005 la prima puntata è online !!

Update: 22.08.2006 ecco la seconda ….

Di .:: Maurizio Pelizzone

21 risposte su “Drag and Drop con Javascript”

Cavolo, i Drag and Drop con Javascript sono conosciuti… ma applicarli ad un e-shop non ci avevo ancora pensato !
Ho visto il tuo esempio… ti devo dire che mi piace un sacco (perchè non ci ho pensato prima!), mi metto subito a sperimentare.

Grazie per la dritta… !

Ciao

PS. ti sei meritato un posto tra i miei preferiti… continua così. 😉

ciao complimenti anche se sono con le prime armi per quanto riguarda il js la tua dritta
è spiegata molto bene, mai pensato di sponsorizzare meglio questo sito e in oltre magari da la possibilità a terzi di proporre alternative su fli argomenti da te proposto o di proporre nuovi argomenti, sempre per quanto riguarda la programmazione lato client e server…
Forse ti saraà venuta in mente l’obbiezione: cavolo questo mi propone il solito blog , ma vista la buona struttura che ha questo sito mi sembra che ci voglia tanto poco per mettere in piedi un sistema di brain-sharing (termine che penso di aver coniato ora!).
se ti servisse una mano con idee la mia mai l’hai!
ciao

Ciao Mattia,

Questo è un blog personale, dove scrivo quando ho tempo e ispirazione.
L’unico obbiettivo è la condivisione di conoscenza e l’unica fonte si sponsorizzazione sono “google” con un po’ di seo e i link spontanei di altri siti e/o blog.

Se hai voglia di scrivere qualche tutorial e/o articolo sarò ben falice di pubblicarlo a tuo nome.

Infine per quanto riguarda il “brain-sharing” penso che le gestione dei commenti sia un ottimo strumento per “condividere il cervello”.

Aspetto quindi volentieri ( e incuriosito ) le tue idee.

ciao,
ho letto l’introduzione e la prima puntata di “Drag and Drop con Javascript”: finalmente una spiegazione chiara, che ti aiuta a capire il drag and drop un passo alla volta… peccato che manchino le altre puntate…
Non è che avresti voglia/tempo di pubblicarle??
Sarebbe molto utile…
Grazie.
Michela

Prima di tutto complimenti per lo script….finalmente un drag&drop sintetico e facile da capire…
Però in una pagina taggato con
con firefox lo script non funziona più, come mai??
Grazie in anticipo

ehi ehi.. senti… la tua guidaa è stupenda! ma io aspetto che la finiscii! non puoi lasciarla così a metà.. ho bisogno di leei 😛

vabbè.. grazie della favolosa guida.

cius

Ciao e complimenti per lo script…mi interessa molto e vorrei inserirlo nel mio sito…in particolare al posto degli oggetti vorrei metterci delle foto di giocatori in modo che ciascuno possa creare la sua formazione ideale: a questo punto mi viene il problema: Come faccio a far si che quello che ogni utente ha selezionato diventi visibile a tutti? Ossia è possibile crare una specie di tasto “submit”? Spero di essere stato chiaro….e complimenti ancora!

certo che sì …

salvi tutto tramite l’utilizzo di cookie e poi invi con un submit ( o ajax se vuoi farlo più web2.0 )

in pratica potresti riversare il contenuto del cookie dentro un campo hidden.

per impacchettare i dati prima dell’invio io proverei con json.

tienimi aggiornato 😉

ciao, a proposito dell’ultimo commento che hai lasciato.. non capisco come sia possibile un’implementazione coi cookie e la submit. come si fa a far comunicare a php qualcosa da javascript? cioe.. la storia lato client lato server.. come fai a superarla.. io ho grosse difficoltà a portare il risultato di una funzione JS in php e quindi in un cookie.. magari c sentiamo via mail.. ciao

@Claudio
allo scatenarsi di un evento come la modifica della posizione di un elemento, aggiungo delle info in un cookie ( via js )

poi sull’evento click di un ipotetico pulsante “salva”, leggo le informazioni che precedentemente ho scritto nel cookie ( sempre via js ) e tramite ajax ( o anche un semplice submit se non è un problema ricaricare la pagina ) le invio come parametro ad una pagina php.

la pagina php dopo aver fatto il parse del parametro le salva su db.

al successivo login, dopo aver letto le info da db le riverso sul cookie.

la pagina di che visualizza la disposizione degli elementi ovviamente deve leggere il cookie ( via js ) e modificare il DOM in modo appropriato.

js e php rimangono separati “in casa” ma tramite il passaggio di parametri o cookies posso scambiarsi dei “messaggi” …

se poi ci mettiamo un po’ di ajax la cosa sembrerà quasi “JIT”

tutto chiaro adesso ?

non mi è molto chiaro come fai a scrivere in un cookie da JS.. potresti scrivere 2 linee di codice per mandare una variabile o un array da una funzione di JS al cookie di php? non capisco visto ke php viene compilato lato server e quando viene creato l’array in js (lato client) php è già stato bell’e compilato.
ti ringrazio dell’attenzione. sto cercando una soluzione a questo quesito da tanto ormai.. 🙁

Ciao, ho letto i primi due passi della tua guida ed è stata veramete semplice e chiara da capire…ora però mi servirebbero gli altri due passi 🙁 come faccio a prendere e spostare gli oggetti????

Funziona anche con FF, basta aggiungere “px” come segue:

if (drag){
oDrag.style.left = e.clientX -x + “px”
oDrag.style.top = e.clientY -y + “px”
}

Grazie mille Maurizio, la tua giuida è l’unica che si capisce!

Ciao.

Qualcuno mi sa dire come devo modificare il codice per fare in modo che nel carrello si possa mettere ciascun elemento una sola volta?

Ciao Fabrizio,
Hai due possibilità.
ti crei un’array in js che vai a controllare e valorizzare in fase di inseirmento.
oppure lo controlli via server tramite una chiamata ajax.

Darti il codice diventa lungo a complicato tramite un commento ma fammi sapere se hai un problema spedifico.

Un’ultimo consiglio. Il codice scritto in questo post è molto vecchio (2005).
Se pensi di usarlo in produzione valuta l’utilizzo di Jquery che con le lib UI ha una funzione “draggable” che ti dovrebbe semplificare parecchio le cose.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.