Ad Agrigento si gioca? Organizziamoci e giochiamo --> GiocAGrigento!

10 luglio 2007

Dojo e il dragNdrop

Metterlo su è stata un'impresa, un pezzo di codice qui, un altro pezzo li ... insomma tanta confusione, ma alla fine sono riuscito a costruire il sistema DnD (non è dungeons and dragons n.d.r.) per mad4murder.
Cliccando sul volto nel banner in alto, appena ce lo metteremo, verrà visualizzato l'ufficio corrispondente. In questo ci sarà (almeno) una zona "calda" in cui sarà possibile depositare, tramite DnD, l'elemento investigativo da esaminare.
Il DnD implementato è selettivo: se cercherete di droppare un elemento investigativo che non sia congruo con il tipo di esami offerto dall'ufficio, allora quello se ne tornerà al suo posto senza effetti (un medico non sa che dirvi se gli chiedete un rapporto balistico, ad esempio)

Andiamo al lato tenico, sveliamo un po' del codice di m4m: per definire un oggetto dom draggabile ho scritto
new dojo.dnd.HtmlDragSource(newElemento, tipo);
dove "newElemento" è l'oggetto da rendere trascinabile e "tipo" indica, nel caso di mad4murder, se si tratta di una persona, di un cadavere, di un oggetto, di un'arma eccetera, in modo da consentire la selettività di cui parlavo prima, una sorta di tag alla del.icio.us, per intenderci.
In realtà si possono dare diversi tag: quindi una pistola può essere taggata con oggetto e con arma passando la stringa "oggetto arma").
Per definire un oggetto in cui si possano trascinare gli elementi ho implementato queste poche righe
var inGroup = new dojo.dnd.HtmlDropTarget(this.landingBox, ["persona"]);
inGroup.onDrop = _this.landedElementCallback;
dove landingBox è il div che sarà la zona "calda" come ho detto prima, e (lo dice il nome stesso) su questo gli elementi potranno atterrare dopo che li avrete trascinati con il mouse.
In questo codice ho fissato come unico elemento accettabile il tipo "persona" (potranno atterrare solo elementi taggati "persona").
Infine, per fare reagire il div al drop ed ottenere il risultato vero e proprio dell'analisi all'elemento sottoposto ad indagine ho legato una callback (chiamata landedElementCallback) all'evento onDrop del div stesso.

Nella speranza di esservi stato utile
ciao