Foros de debate en castellano Javascript. Problemas con arrastrar y soltar en una pÃ¡gina html. Programación en Castellano.

Problemas con arrastrar y soltar en una pÃ¡gina html

safuen
22 de Marzo del 2004

Hola a todos! estoy desesperada necesito ayuda urgente. He hecho un programa en javascript
dentro de una pÃ¡gina html para mover elementos con eventos de javascript,hasta ahÃ bien, pero
sÃ³lo consigo moverlos en la primera parte de la pÃ¡gina es decir lo que ocupa la ventana pero
la pÃ¡gina va a ser grande y necesito colocarlos tambien al final, no funciona ni bajando con
el scroll ni nada. Hay soluciÃ³n?
AhÃ mando el cÃ³digo pqara que lo echeis un vistazo:)

<html>
<head>
<SCRIPT LANGUAGE="JavaScript">
//---------CÃ³digo para arrastrar y soltar en IExplorer--------------------

var curElement;

//funcion que realiza el movimiento
function doMouseMove() {
var newleft=0, newTop = 0
if ((event.button==1) && (curElement!=null)) {
newleft=event.clientX-(curElement.offsetWidth/2)
if (newleft<0) newleft=0
curElement.style.pixelLeft= newleft

newtop=event.clientY -(curElement.offsetHeight/2)
if (newtop<0) newtop=0
curElement.style.pixelTop= newtop
event.returnValue = false
event.cancelBubble = true
}
}

function doMouseDown() {
//AquÃ comprobamos que se ha pinchado con el ratÃ³n en una imagen para mover
if ((event.button==1) && (event.srcElement.tagName=="DIV"))
curElement = event.srcElement
}

document.onmousedown = doMouseDown;
document.onmousemove = doMouseMove;
document.onmouseup = new Function("curElement=null") ;

</SCRIPT>
</head>

<SCRIPT LANGUAGE="JavaScript">

var tabla=new Array();

tabla[0]="Salamanca";
tabla[1]="Madrid";
tabla[2]="Barcelona";
tabla[3]="Burgos";
tabla[4]="Soria";
tabla[5]="Caceres";
tabla[6]="Badajoz";
tabla[7]="Sevilla";
tabla[8]="Huelva";
tabla[9]="Tenerife";
tabla[10]="Menorca";
tabla[11]="Toledo";
tabla[12]="Navarra";
tabla[13]="Lerida";
tabla[14]="Valencia";
tabla[15]="Alicante";
tabla[16]="Murcia";
tabla[17]="Bilbao";
tabla[18]="Zamora";
tabla[19]="Granada";
tabla[20]="Lugo";
tabla[21]="Sanander";
tabla[22]="Zaragoza";
tabla[23]="Oviedo";
tabla[24]="Malaga";
tabla[25]="Almeria";
tabla[26]="Albacete";
tabla[27]="Teruel";
tabla[28]="Alava";
tabla[29]="Cadiz";

document.write('<CENTER><FONT FACE="Comic Sans MS" SIZE="+3"><U><B>Mover los elementos</B></U></FONT></CENTER>');
//Lista con los elementos a mover
document.write('<table border="1" width="100%" >');
document.write('<tr>');
document.write('<td width="50%">');
document.write('<table border="0" width="100%" cellspacing="5">');
var i;
for(i = 0; i <= 29; i++)
{
document.write('<tr>');
document.write(' <td width="9%">'+(i+1)+'.</td>');
document.write(' <td width="91%"><DIV ID="'+ tabla[i]+'" STYLE="position: absolute; visibility: visible; left: 60; top: '+(70+i*26)+';">'+tabla[i]+'</td>');
}
document.write(' </table>');
document.write('</td>');
document.write('<td width="50%">');
document.write(' <table border="0" width="100%" cellspacing="5">');
var j;
for(j = 0; j <= 29; j++)
{
document.write('<tr>');
document.write(' <td width="9%">'+(j+1)+'.</td>');
document.write(' <td width="91%">_________________</td>');
document.write('</tr>');
}
document.write('</table>');
document.write('</td>');
document.write('</tr>');
document.write('</table>');

</SCRIPT>

</body>

</html>

GRACIAS!

rsalvadores
22 de Marzo del 2004

Creo que lo que te falta es:
...
newleft=event.clientX-(curElement.offsetWidth/2)//+ document.body.scrollLeft;
...
newtop=event.clientY -(curElement.offsetHeight/2)+ document.body.scrollTop;
...

Creo que solo sirve en IE, pero me parece que todo el script es para IE ¿no?

suerte rsalvadores