JS - Drag & Drop

**ragnetta** · 09-02-2004, 15:09

Ragazzi Salve a tutti, ho cercato in giro per la rete degli script per il drag and drop, ne ho trovato uno semplice semplice e l'ho modificato secondo le mie esigenze.
Vi spiego di cosa avevo bisogno:
volevo trascinare un'immagine in una porzione di pagina che stabilisco io, in pratica:
1. se la trascino in quella zona, l'immagine deverimanere lì ferma
2. se la trascino fuori, deve ritornare nella posizione di partenza

Fin qui ci sono, grazie all'aiuto di un collega l'ho fatto...guardate qui http://www26.brinkster.com/sebruno/prova2drag.htm

Adesso vorrei fare un'ulteriore modifica: vorrei che due immagini possano entrare nella zona rosa e le altre due nella zona gialla...chi mi aiuta???

**ragnetta** · 09-02-2004, 15:33

Codice per provarlo da casa...copia e incolla:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Drag&Drop</TITLE>
<SCRIPT LANGUAGE="JavaScript">
N = (document.all) ? 0 : 1;
var ob;
var posXInit;
var posYInit;

var posXInit1, posYInit1;
var posXInit2, posYInit2;
var posXInit3, posYInit3;
var posXInit4, posYInit4;
function init() {
posXInit1 = parseInt(document.getElementById("s").style.left);
posYInit1 = parseInt(document.getElementById("s").style.top);
posXInit2 = parseInt(document.getElementById("d").style.left);
posYInit2 = parseInt(document.getElementById("d").style.top);
posXInit3 = parseInt(document.getElementById("c").style.left);
posYInit3 = parseInt(document.getElementById("c").style.top);
posXInit4 = parseInt(document.getElementById("h").style.left);
posYInit4 = parseInt(document.getElementById("h").style.top);
var mName1 = parseInt(document.getElementById("s").style);
var mName2 = parseInt(document.getElementById("d"));
var mName3 = parseInt(document.getElementById("c"));
var mName4 = parseInt(document.getElementById("h"));
}

function MD(e) {
if (N) {
ob = document.layers[e.target.name];
X=e.x;
Y=e.y;
return false;
} else {
ob = event.srcElement.parentElement.style;
X=event.offsetX;
Y=event.offsetY;
}
posXInit = parseInt(ob.left);
posYInit = parseInt(ob.top);
}

function MM(e) {
if (ob) {
if (N) {
ob.moveTo((e.pageX-X), (e.pageY-Y));
}
else {
ob.pixelLeft = event.clientX-X + document.body.scrollLeft;
ob.pixelTop = event.clientY-Y + document.body.scrollTop;
return false;
}
}
}
function MU() {
var mLeft = parseInt(document.getElementById("o").style.left);
var mTop = parseInt(document.getElementById("o").style.top);
var mLen = mLeft + parseInt(document.getElementById("o").style.width) ;
var mAlt = mTop + parseInt(document.getElementById("o").style.height );

var posXFine = parseInt(ob.left);
var posYFine = parseInt(ob.top);
if( posXFine>=mLeft && posXFine<=mLen && posYFine>=mTop && posYFine<=mAlt ) {
} else {
ob.pixelLeft = posXInit;
ob.pixelTop = posYInit;
}
ob = null;
}

if (N) {
document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP);
}
document.onmousedown = MD;
document.onmousemove = MM;
document.onmouseup = MU;

function btnreset_onclick() {
document.getElementById("s").style.left = posXInit1;
document.getElementById("s").style.top = posYInit1;
document.getElementById("d").style.left = posXInit2;
document.getElementById("d").style.top = posYInit2;
document.getElementById("c").style.left = posXInit3;
document.getElementById("c").style.top = posYInit3;
document.getElementById("h").style.left = posXInit4;
document.getElementById("h").style.top = posYInit4;
}

//-->
</SCRIPT>
</HEAD>
<BODY onLoad="init();">

<div id="s" style="Z-INDEX: 1; LEFT: 50px; POSITION: absolute; TOP: 300px">

</div>

<div id="d" style="Z-INDEX: 3; LEFT: 100px; POSITION: absolute; TOP: 300px">

</div>

<div id="c" style="Z-INDEX: 2; LEFT: 150px; POSITION: absolute; TOP: 300px">

</div>

<div id="h" style="Z-INDEX: 4; LEFT: 200px; POSITION: absolute; TOP: 300px">

</div>

<div id="n" style="BORDER-RIGHT: #000000 1px; BORDER-TOP: #000000 1px; LEFT: 433px; OVERFLOW: visible; BORDER-LEFT: #000000 1px; WIDTH: 100px; BORDER-BOTTOM: #000000 1px; POSITION: absolute; TOP: 106px; HEIGHT: 100px; BACKGROUND-COLOR: #ffff00; layer-background-color: #FFFF00"></div>

<div id="o" style="BORDER-RIGHT: #000000 1px; BORDER-TOP: #000000 1px; LEFT: 133px; OVERFLOW: visible; BORDER-LEFT: #000000 1px; WIDTH: 100px; BORDER-BOTTOM: #000000 1px; POSITION: absolute; TOP: 106px; HEIGHT: 100px; BACKGROUND-COLOR: #ffcccc; layer-background-color: #FFFF00"></div>

<INPUT id=btnreset type=button value=Reset name=btnreset LANGUAGE=javascript onclick="return btnreset_onclick()">

</BODY>
</HTML>

**ragnetta** · 09-02-2004, 15:52

**ragnetta** · 09-02-2004, 16:32

Perchè non mi aiuta nessunooooo....

**Xinod** · 09-02-2004, 17:17

specifica meglio il problema piuttosto!
2 immagini a caso tra le 4 o 2 specifiche in un riquadro e le altre 2 nell' altro?

**ragnetta** · 10-02-2004, 11:01

Ad esempio: le rosse nel rosa, le nere nel giallo

**ragnetta** · 10-02-2004, 11:20

Forse devo spiegarmi meglio, dunque:
Lo script consta di 3 funzioni fondamentali (a parte la init() che serve per riportare tutto nella posizione iniziale)

1. MD gestisce gli eventi per l'onmousedown
2. MM gestisce gli eventi per l'onmousemove
3. MU gestisce gli eventi per l'onmouseup

in particolare nella funzione MU viene fatto il controllo sui margini entro cui deve fermarsi l'immagine, se io volessi farlo dinamico...cioè: se l'immagine è "x" allora i margini devono essere quelli del livello "o" se invece l'immagine è "y" allora i margini devono essere quelli del livello "n"...come si può fare???...

**Xinod** · 10-02-2004, 15:17

in qualche modo devi portarti dietro anche un riferimento del livello draggato al momento (il suo id),
senza modificare troppo il resto aggiungi dopo ob = event.srcElement.parentElement.style;

obId = event.srcElement.parentElement.id;

poi in base all' id determini il target valido

codice:

function MU() {
var tget=(obId=='d'||obId=='h')?'o':(obId=='s'||obId=='c')?'n':false

if(tget){
	var mLeft = parseInt(document.getElementById(tget).style.left); 
	var mTop = parseInt(document.getElementById(tget).style.top); 
	var mLen = mLeft + parseInt(document.getElementById(tget).style.width); 
	var mAlt = mTop + parseInt(document.getElementById(tget).style.height); 

	var posXFine = parseInt(ob.left); 
	var posYFine = parseInt(ob.top); 
	if( posXFine>=mLeft && posXFine<=mLen && posYFine>=mTop && posYFine<=mAlt ) { 
	alert('il div "'+obId+'" è stato trascinato su "'+tget+'"')
	} else { 
	ob.pixelLeft = posXInit; 
	ob.pixelTop = posYInit; 
	} 
	ob = null; 
}
}

nota che le modifiche x NN non sono contemplate in questo esempio
ciao

**ragnetta** · 10-02-2004, 17:51

Grazie mille!!!! finalmente...ci stavo provando da due giorni!!!
GRAZIE

Discussione: JS - Drag & Drop

Strumenti discussione

Ricerca discussione

Visualizza

JS - Drag & Drop chi si cimenta in un bel giochetto?

Permessi di invio