Ver Mensaje Individual
  #4 (permalink)  
Antiguo 23/05/2006, 00:53
Avatar de B**
B**
 
Fecha de Ingreso: enero-2006
Ubicación: Monterrey,Mexico
Mensajes: 952
Antigüedad: 19 años
Puntos: 3
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]