Foros del Web - Ver Mensaje Individual

furoya · #5 (**permalink**) 12/09/2003, 12:31

Mi estimado dieguicho,

No sé si ya había dicho en estos foros cuanto odio el BBCode, si no lo hice, aprovecho la oportunidad. Corregí -o al menos eso espero- algunos errores del código anterior y le agregué un accesskey que no fue un error de la transcripción automática sino mío propio de mí.

Acá te dejo el código que te había mencionado ( NOTA : en este mensaje va a haber referencias a un mensaje privado ); no se parece a lo que estás necesitando, pero se me supone más fácil de adaptar a otros navegadores que no sean el IE.

<HTML>
<HEAD>
<STYLE>
#tabla_1{font-size:20px}
#flechas{color:yellow; background:black; cursor:hand; font:900 20px sans-serif; width:20px; text-align:center}
</STYLE>
<SCRIPT>
var o, d, c1, c2, c3, p1, p2, p3;

function cortaF(){
flechas.style.cursor="move";

fO=window.event.srcElement.parentElement;

o=fO.rowIndex; /*sólo para confirmar valores en input*/

c1=fO.cells[1].innerHTML; /*contenidos de cada celda origen*/
c2=fO.cells[2].innerHTML;
c3=fO.cells[3].innerHTML; /* */

vA.value=c1; /*sólo para confirmar valores en input*/
vB.value=c2;
vC.value=c3; /* */
}

function pegaF(){
flechas.style.cursor="hand";

fD=window.event.srcElement.parentElement;

d=fD.rowIndex; /*sólo para confirmar valores en input*/

p1=fD.cells[1].innerHTML; /*contenidos de cada celda destino*/
p2=fD.cells[2].innerHTML;
p3=fD.cells[3].innerHTML; /* */

v1A.value=p1; /*sólo para confirmar valores en input*/
v1B.value=p2;
v1C.value=p3;
v2.value=o;
v3.value=d; /* */

tabla_1.rows.item(d).cells.item(1).innerHTML=c1;
tabla_1.rows.item(d).cells.item(2).innerHTML=c2;
tabla_1.rows.item(d).cells.item(3).innerHTML=c3;

tabla_1.rows.item(o).cells.item(1).innerHTML=p1;
tabla_1.rows.item(o).cells.item(2).innerHTML=p2;
tabla_1.rows.item(o).cells.item(3).innerHTML=p3;

}

</SCRIPT>
</HEAD>
<BODY>
<h2>Intercambia filas con <i>Drag & Drop</i> en las flechas de la primer columna. </h2>

<table><td style="line-height:18pt">
Contenido origen : <br>Contenido destino : <br>Fila origen : <br>Fila destino : </td><td><input id=vA><input id=vB><input id=vC><br>
<input id=v1A><input id=v1B><input id=v1C><br>
<input id=v2><br>
<input id=v3>
</td></table><p>

<table id=tabla_1 align=center border=1> <colgroup span=4> <col id=flechas> </colgroup>
<tr>
<td title="Arrastre las flechas para mover filas." unselectable="on" onmousedown=cortaF() onmouseup=pegaF()>&#8597</td> <td>Alfa </td> <td> --- A --- </td> <td> --- a --- </td>
</tr><tr>
<td title="Arrastre las flechas para mover filas." unselectable="on" onmousedown=cortaF() onmouseup=pegaF()>&#8597</td> <td>Bravo </td> <td> --- B --- </td> <td> --- b --- </td>
</tr><tr>
<td title="Arrastre las flechas para mover filas." unselectable="on" onmousedown=cortaF() onmouseup=pegaF()>&#8597</td> <td>Charly </td> <td> --- C --- </td> <td> --- c --- </td>
</tr><tr>
<td title="Arrastre las flechas para mover filas." unselectable="on" onmousedown=cortaF() onmouseup=pegaF()>&#8597</td> <td>Delta </td> <td> --- D --- </td> <td> --- d --- </td>
</tr>
</table>

</BODY>
</HTML>

Por supuesto que este código se puede optimizar usando loops y algunos length que eviten escribir una línea para cada celda y/o columna; pero me pareció que así se veía más claro el funcionamiento y, después de todo, éste no es un depósito de cut & paste sino un Foro donde venir a aprender sobre javascript.

Ah!. Y si te gustó el primer código como para juegos; éste te tiene que gustar más :

<HTML>
<HEAD>
<STYLE>
#tabla_3 {height:200pt; width:200pt}
#tabla_3 td{border:4pt outset gold; width:40pt; height:40pt; text-align:center}
</STYLE>

<SCRIPT>
var cOUno;
var cODos="";

function mover2(){
if(cODos==""){
document.getElementById("tabla_3").style.cursor="m ove";
cOUno=window.event.srcElement;
while(cOUno.tagName!="TD"){cOUno=cOUno.parentEleme nt}
cODos=cOUno.innerHTML;
cOUno.style.filter="alpha(opacity=30);moz-opacity:0.3";}
else{
document.getElementById("tabla_3").style.cursor="" ;
cDUno=window.event.srcElement;
while(cDUno.tagName!="TD"){cDUno=cDUno.parentEleme nt}
cDDos=cDUno.innerHTML;
cDUno.innerHTML=cODos;
cOUno.innerHTML=cDDos;
cODos="";
cOUno.style.filter="";}
}
</SCRIPT>
</HEAD>
<BODY>

<h2>Intercambia celdas con click. </h2>

<table onclick=mover2() id=tabla_3 border=0 cellpadding=0 cellspacing=0 align=center>



<tr>
<td><font face=fantasy size=6 color=orange>K</font></td> <td><b><big>8</big></b></td> <td><span style="background:red;width:24;height:24"></span></td> <td>&nbsp;</td>
</tr><tr>
<td><span style="background:fuchsia;width:24;height:24"></span></td> <td>&nbsp;</td> <td><font face=fantasy size=6 color=purple>J</font></td> <td><b><big>3</big></b></td>
</tr><tr>
<td><font face=fantasy size=6 color=maroon>F</font></td> <td><b><big>5</big></b></td> <td><span style="background:blue;width:24;height:24"></span></td> <td>&nbsp;</td>
</tr><tr>
<td><span style="background:pink;width:24;height:24"></span></td> <td><font face=fantasy size=6 color=teal>Z</font></td> <td>&nbsp;</td> <td><b><big>4</big></b></td>
</tr>
</table>

</BODY>
</HTML>

saludos
furoya