1 Drag & Drop Ci sono varie soluzioni per simulare l'azione di spostamento e trascinamento di un oggetto. Le diverse soluzioni presuppongo: 1)sapere dove è posizionato il mouse 2)sapere dove è posizionato l'oggetto 3)selezionare l'oggetto e sincronizzare il suo movimento con quello del mouse 4) terminare il trascinamento (lo spostamento sincronizzato)
2 Javascript e la posizione del mouse Un metodo cross-browser per rilevare la posizione del mouse è il seguente: nell’header del documento: mouseX = 0; mouseY = 0 //variabili globali function getMouse(e) { if (!e) {e = window.event} // funziona con IExplorer mouseX = e.clientX; mouseY = e.clientY } a fine documento document.body.onmousemove = getMouse Nota Bene: essendo un evento del body conviene utilizzare lo stile: html, body {width: 100%; height:100%; margin 0 0;}
3 dov'è posizionato l'oggetto Ogni elemento ha queste 3 proprietà: offsetLeft posizione x rispetto al contenitore (pixel) offsetTop posizione y rispetto al contenitore (pixel) offsetParent oggetto contenitore Ogni oggetto può essere contenuto in un altro oggetto e cosi via. Il primo oggetto in assoluto (html) ha offsetParent = null. Per sapere la posizione effettiva rispetto allo schermo del browser occorre sommare tutte le posizioni offset finch'è si arriva a offsetParent = null function getX (elm) { var var ret = 0;var elmCor = elm while (elmCor != null){ret += elmCor.offsetLeft; elmCor=elmCor.offsetParent} return ret}
4 Inizio e fine trascinamento Si può decidere che al primo click comincia il trascinamento dell'oggetto fino al successivo click (onclick) Utilizzare una variabile globale per puntare all'oggetto che si vuole trascinare e sul mousemove riposizionare l'oggetto in prossimità del mouse in alternativa si può utilizzare il mousedown per iniziare il drag e il mousedown per terminarlo function dragInizio( elm ) {oggettoSelezionato = elm} function dragFine( elm ) {oggettoSelezionato = null} function dragMe( elm ){ if (oggettoSelezionato == null) dragInizio(elm) elsedragFine(elm)}
5 drag & drop