Drag & Drop Javascript
martedì 26 settembre 2006
(5 voti, media: 4,40)
Loading ...Per la serie: "Perché non posso usare (roba a caso) nella mia fichissima web application?" La roba a caso di oggi è il drag & drop.
Senza stare a reinventare l'acqua calda e senza usare Script.aculo.us o altre "cosacce" di dubbia comprensione e di pesantezza inaudita, mi permetto di consigliare la libreria di YoungPup.net. Il download è corredato di 6 esempi (presenti anche sul sito), che vi permetteranno di utilizzare subito DOM-Drag.
Perchè proprio DOM-Drag? E' presto detto:
- E' leggera, circa 100 righe di codice
- Funziona con qualsiasi browser recente, su Windows, Linux e Mac (cosa non da poco)
- E' semplice da usare, e si produce subito qualcosa di carino
- Ha 5 anni, e se una cosa funziona dopo 5 anni è senz'altro un ottimo prodotto. Sì, anche nel web che ci si creda o no...
- Rispetta gli standard
- La documentazione è scarna. Vi costringe a lavorarci sopra e a comprenderla pienamente prima di poterci lavorare sfruttando tutte le sue potenzialità. L'esercizio mentale serve sempre
- E' chic. Chi è contro Script.aculo.us avrà un argomento in più nelle conversazioni tra amici, colleghi e sui forum
Vediamo ora una piccola panoramica, come al solito con esempi liberamente utilizzabili, delle potenzialità di questa libreria.
DRAG & DROP
Il semplice drag & drop di un'oggetto si realizza in pochissimi passi. Basta includere il file JavaScript della libreria, assegnare un id all'elemento da dover "muovere" (deve avere per forza l'attributo CSS position impostato ad "absolute" o "relative") e inizializzare il tutto con la chiamata:
Drag.init(document.getElementById("id oggetto"));
La libreria, in un centinaio di righe di codice si occupa di gestire tutti gli eventi associati all'oggetto che si sta spostando. Possiamo trascinare qualunque oggetto sia dotato di id come ad esempio immagini, campi di moduli, oggetti di liste, elementi div, celle di tabelle, ecc...
Anche in questo caso un esempio vale più di 1000 parole.
E' possibile definire eventi all'inizio del Drag, durante il Drag e alla fine con una sintassi molto semplice, basta dare un'occhiata al secondo esempio.
document.getElementById("id oggetto").onDragStart = function(x,y) { corpo funzione } document.getElementById("id oggetto").onDragEnd = function(x,y) { corpo funzione }
FINESTRE
Ultimamente va di moda realizzare piccole finestrelle trascinabili all'interno della finestra del browser, basti pensare alla homepage personalizzata di Google, o ad altre pagine simili.
Con Dom-drag creiamo una finestra trascinabile tramite la barra del titolo in poche righe:
Drag.init(document.getElementById("id handler"),document.getElementById("id finestra"));
In questo caso la funzione Drag.Init viene chiamata utilizzando due parametri: il primo si riferisce all'oggetto che funzionerà da maniglia, il secondo è l'id dell'oggetto che verrà spostato. Ovviamente per far sì che tutto funzioni il primo ogetto deve essere incapsulato nel secondo, date un'occhiata al terzo esempio...
CONCLUSIONI
La libreria, per quanto semplice, è davvero utilissima e permette di creare oggetti trascinabili davvero con poco. Scaricatela, capitela ed usatela, non ve ne pentirete!!!
In alternativa puoi abbonarti alla newsletter, riceverai un'email ogni volta che verrà pubblicato un nuovo post. Il tuo indirizzo email sarà gestito da Feedburner.
5 ottobre 2006 alle 13:20
Il sito coretto è http://boring.youngpup.net/2001/domdrag/project
17 novembre 2006 alle 00:16
ci sono problemi con i form all’interno dei div draggabili
17 novembre 2006 alle 09:56
@Stefano
Sii più preciso:
Ti chiedo questo perché sinceramente ho usato il drag&drop anche con moduli e non ho mai avuto problemi…
19 novembre 2006 alle 08:13
Mi pare qualcuno l’abbia segnalato anche sul sito ufficiale.
Ti descrivo la situazione che ho provato: form all’interno del div, con campi text e select.
Testato con Safari e Firefox; sul primo non si apre la select, su ff il campo di testo è come se fosse disabilitato.
Non sono andato a fondo nella questione. Magari è una sciocchezza.
Se risolvo ti faccio sapere.
19 novembre 2006 alle 12:13
Posso dirti che il campo input l’ho utilizzato e funziona . Può essere che abbia utilizzato qualche cavolo di hack, ma funziona. Devo controllare.
Per la select sinceramente non ho mai provato…
15 febbraio 2007 alle 14:12
[...] Per due articoli interessanti sul tema eccovi i link1 e link2 [...]
19 aprile 2007 alle 23:16
Ciao.
Complimenti per l’oggettino
Amore a prima vista
function initLibrary(){
var target= document.getElementsByTagName(‘div’);
for(var i=0;i
26 aprile 2007 alle 23:22
ciao forse puoi darmi una mano….
ho da poco creato un blog..
su blogger..
ma non riesco a trascinare gli elementi pagina….
cosa devo fare?
javascript dev’essere attivato o non c’entra nulla?mhà?
a presto
30 aprile 2007 alle 21:31
Eh sì, ci vuole JS abilitato
1 maggio 2007 alle 11:23
si ma è attivato!!!
te ne intendi di linguaggio html?
22 novembre 2007 alle 18:31
E’ possibile trascinare un div con all’interno un iframe?
e se sì, come?
io ci ho provato ma non trascina….
8 aprile 2008 alle 19:56
Ciao,
ho scaricato la libreria che hai consigliato ed è veramente fatta bene
Solo che ora ho un altro problema, dato che non sono molto esperto in materia di DRAG AND DROP, mi servirebbe sapere come fare per riconoscere se l’oggetto che ho spostato, è stato spostato in un riquadro giusto. Del tipo, ho un’immagine e due riquadri, l’immagine può essere spostato solo in uno dei due riquadri, come si fa a riconoscere se il riquadro è quello giusto???
1 giugno 2008 alle 00:24
Attenzione: se l’elemento da trascinare ha il positionamento espresso in percentuale, viene erroneamente interpretato come posizionamento in pixel!
20 agosto 2008 alle 05:03
Ciao, è possibile sostituire lo sfondo dell’oggetto con un’immagine? se si mi segnali lo script?
20 agosto 2008 alle 09:49
Puoi usare i CSS