Sugerencia para Drag& Drop

B** · #1 (**permalink**) 21/05/2006, 20:08

Este tema bien podria ir en AJAX, pero creo que es mas javascript.
Mi proyecto es hacer una drag&drop para un carrito de compras.Donde el usuario arrastrara los elementos a la cesta.
Bien,tengo unas imagenes q ya pude hacer "dragables" y tengo una zona que se supone que es la cesta,
Mi duda es como hago para que la cesta sepa cuando se coloco un elemento ahi..
Se me viene a la mente ...q hay q checar cuando hay un mouseup en la cesta y tambien saber si hay un elemento atraves del mousedown.

Mejor alguien ayudeme porfavor.

B** · #2 (**permalink**) 22/05/2006, 13:58

Alguna sugerencia?

para esta semana es mi proyecto final en la uni!!

B** · #3 (**permalink**) 22/05/2006, 15:16

Bueno divagando creo estar cerca de la solucion,puede ser checando eventos onmouseop,down..... y tambien checando las coordenadas del mouse, tratare de explicarme mejor..
Tengo 2 imagenes y una imagen q es la cesta y es a donde los van a arrastrar... checo el onmousedown y mouse up de las imagenes.. y pongo unas varibles booleanas, para checar que si fueron hechos los eventos, luego checar las coordenadas del mouse,¿para que?pues si se efectuo el evento onmouseup de la imagen en la cesta, checo las coordenadas y si estas son iguales a las de la cesta, entonces quiere decir que lo solto ahi...
Alguien tiene un ejemplo dnde haya usado coordenadas del mouse en div.
Gracias de antemano.

B** · #4 (**permalink**) 23/05/2006, 00:53

Bueno les comento que ya me funciono:D, aqui les pongo el codigo (recuerden que por ahora es un prototipo, aun faltaria pulir el codigo, pero por lo menos detecto cuando lo arrastro a la cesta, y que elemento fue el que se arrastro):
[code]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>DRaG & DroP</title>

</head>
<body>
<script type="text/javascript" src="wz_dragdrop.js"></script>

<p align="center">

</p>
<div id="lyr0" onmouseup="soltar('laptop')" style="position:absolute;left:120px;top:50px;width :140px;height:90px;background-image:url(laptop.jpg);"></div>
<div id="lyr1" onmouseup="soltar('impresora')" style="position:absolute;left:50px;top:50px;width: 100px;height:90px;background-image:url(impresora.jpg);"></div>
<div id="remove" onmouseover="addProducto()" style="position:absolute;right:0px;top:30px;width: 300px;height:140px;background:#CCCCCC;"><b>Arrastr a aqui ,para agregar al carrito </b>

</div>

<script type="text/javascript">

var soltado = true;
var lap=false;
var imp=false;
var posicion=false;
var IE = document.all?true:false;

if (!IE) document.captureEvents(Event.MOUSEMOVE)
document.onmousemove = getMouseXY;
var tempX = 0;
var tempY = 0;
function getMouseXY(e) {
if (IE) { //para IE
tempX = event.clientX + document.body.scrollLeft;
tempY = event.clientY + document.body.scrollTop;
}
else { //para netscape
tempX = e.pageX;
tempY = e.pageY;
}
if (tempX < 0){tempX = 0;}
if (tempY < 0){tempY = 0;}
document.Show.MouseX.value = tempX;
document.Show.MouseY.value = tempY;

if((tempX > 1035) && (tempY > 101)){

posicion=true;
}
return true;
}

function soltar(articulo){
if(articulo=="laptop"){
soltado=true;
lap=true;
}
else{
soltado=true;
imp=true;
}

}

function addProducto(){

if((soltado) && (posicion) && (lap)){
alert("Agregaste una laptop SONI vaIO");
soltado=false;
lap=false
}
if((soltado) && (posicion) && (imp)){
alert("Agregaste una impresora HP");
soltado=false;
imp=false;
}

}

SET_DHTML(CURSOR_MOVE, "lyr0", "lyr1", "lyr2", "lyr3", "lyr4");

var dy = 70;
var margTop = 150;
var posOld;

// Array intended to reflect the order of the draggable items
var aElts = [dd.elements.lyr0, dd.elements.lyr1, dd.elements.lyr2, dd.elements.lyr3, dd.elements.lyr4];

function my_PickFunc()
{
// Store position of the item about to be dragged
// so we can interchange positions of items when the drag operation ends
posOld = dd.obj.y;
}

function my_DropFunc()
{
// Calculate the snap position which is closest to the drop coordinates
var y = dd.obj.y+dy/2;
y = Math.max(margTop, Math.min(y - (y-margTop)%dy, margTop + (aElts.length-1)*dy));

// Index of the new position within the spatial order of all items
var i = (y-margTop)/dy;

// Interchange the positions of the two items
aElts[i].moveTo(100, posOld);

// Let the dropped item snap to position
dd.obj.moveTo(100, y);

// Update the array according to the changed succession of items
aElts[(posOld-margTop)/dy] = aElts[i];
aElts[i] = dd.obj;
}

</script>
<form name="Show">
X <input type="text" name="MouseX" value="0" size="4"><br>
Y <input type="text" name="MouseY" value="0" size="4"><br>
</form>
</body>
</html>

[code]