Script Drag&Drop con Javascript

[Dax]

Voglio condividere con tutti voi questo script mio, creato su un altrui base ( giulio.gangi.eu ) e modificato in modo tale da permettere drag e drop di infiniti elementi nella vostra pagina.

Avete presente il Drag&Drop che è? Clickate su un oggettino, spostate il mouse mentre tenete premuto, e questi si sposta con voi, fermandosi nella nuova posizione. Potete farci quello che volete, abbinato ad un div potete fare di tutto.

Io lo uso per spostare su schermo le finestre di aiuto.

 

Consiglio una base di html e js per usarlo ^^

 

<script language="javascript">

var Drag = {

elm: null,
casella: null,
busy: 0,   /* <----- */

get: function(id) {
return document.getElementById(id);
},

init: function(cas,id_div) {
if (Drag.busy == 0) {   /* <----- */
Drag.elm = Drag.get(id_div);
if ( Drag.casella )
document.getElementById(Drag.casella).onmousedown = null;
Drag.casella = cas;
Drag.elm.style.position = "absolute";
document.getElementById(cas).style.cursor = "move";
document.getElementById(cas).onmousedown = Drag.start;
}   /* <----- */
},

start: function(e) {
e = e || window.event;
Drag.elm.lastX = e.clientX;
Drag.elm.lastY = e.clientY;
document.onmousemove = Drag.move;
Drag.elm.onmouseup = Drag.end;
return false;
},

move: function(e) {
e = e || window.event;
Drag.busy = 1   /* <----- */
var ex = e.clientX;
var ey = e.clientY;
var currentX = parseInt(Drag.elm.style.left);
var currentY = parseInt(Drag.elm.style.top);
Drag.elm.style.left = currentX + (ex - Drag.elm.lastX) + "px";
Drag.elm.style.top = currentY + (ey - Drag.elm.lastY) + "px";
Drag.elm.lastX = ex;
Drag.elm.lastY = ey;
return false;
},

end: function() {
Drag.busy = 0   /* <----- */
document.onmousemove = null;
Drag.elm.onmouseup = null;
}

}
</script>

 

Dopo aver inserito questo script, preferibilmente nell'head della pagina, inserite questo codice nel tag che volete faccia da "base" per il drag. Può essere tutto il div oppure la prima riga di una tabella, o un'immagine.

onMouseOver="Drag.init('id_dove_premere','id_div_che_sposti');"

 

Ecco qui un esempio con div

 

spero possa servire a qualcuno ^^

 

EDIT: Aggiornato con la modifica di Piccolo, thanx bell'uomo

Edited February 13, 2009 by Dax

[Guardian of Irael]

Bel lavoro Dax (l'idea inserita nel browser game eh!) ^ ^

Ho notato sul sito d'esempio che se con un oggetto passi sopra ad un altro mantenendo premuto col mouse i due oggetti si scambiano! E' voluto? Dopo che i due oggetti sono stati scambiati se rilasci il tasto non lo lascia e per lasciarlo bisogna ricliccarci (questo accade solo dopo che gli oggetti sono stati scambiati come ho detto prima).

[Dax]

non è voluto, dev'essere un errore xD vabbè conviveteci! XD se limitate a una piccola striscia di 20 pixel d'altezza come drag non troverete problemi (come appunto io nel gioco)

[PICCOLO]

Bello ^^ !

Però voglio vederlo all'opera in dungeons! >: D

 

Ah, se può servirti, queste modifiche dovrebbero risolvere il problema: (le modifiche sono dove ci sono i commenti a fianco ovviamente)

<script language="javascript">

var Drag = {

elm: null,
casella: null,
busy: 0,   /* <----- */

get: function(id) {
return document.getElementById(id);
},

init: function(cas,id_div) {
if (Drag.busy == 0) {   /* <----- */
Drag.elm = Drag.get(id_div);
if ( Drag.casella )
document.getElementById(Drag.casella).onmousedown = null;
Drag.casella = cas;
Drag.elm.style.position = "absolute";
document.getElementById(cas).style.cursor = "move";
document.getElementById(cas).onmousedown = Drag.start;
}   /* <----- */
},

start: function(e) {
e = e || window.event;
Drag.elm.lastX = e.clientX;
Drag.elm.lastY = e.clientY;
document.onmousemove = Drag.move;
Drag.elm.onmouseup = Drag.end;
return false;
},

move: function(e) {
e = e || window.event;
Drag.busy = 1   /* <----- */
var ex = e.clientX;
var ey = e.clientY;
var currentX = parseInt(Drag.elm.style.left);
var currentY = parseInt(Drag.elm.style.top);
Drag.elm.style.left = currentX + (ex - Drag.elm.lastX) + "px";
Drag.elm.style.top = currentY + (ey - Drag.elm.lastY) + "px";
Drag.elm.lastX = ex;
Drag.elm.lastY = ey;
return false;
},

end: function() {
Drag.busy = 0   /* <----- */
document.onmousemove = null;
Drag.elm.onmouseup = null;
}

}

[Dax]

bravo piccolo! ottimo tocco! edito l'esempio e il io giochillo ^^