Tema: Drag and Drop de Filas en una Tabla
Ver Mensaje Individual
  #3 (permalink)  
Antiguo 18/01/2011, 16:46
lodoman
 
Fecha de Ingreso: diciembre-2010
Mensajes: 10
Antigüedad: 13 años, 10 meses
Puntos: 1
Respuesta: Drag and Drop de Filas en una Tabla
Código HTML: 
Ver original
  1. <html>
  2.    
  3.       <head>    
  4.    
  5.         <script language="JavaScript" type="text/javascript">
  6.     /*<![CDATA[*/
  7.     var zxcDObj;
  8.     var zxcDTable=[];
  9.     
  10.     function zxcInitDragRow(zxcid){
  11.      var zxctable=document.getElementById(zxcid);
  12.      zxcDTable.push([zxctable,zxctable.rows[0].cells.length]);
  13.      zxcclone=zxcES(zxctable.cloneNode(true),{position:'absolute'},document.getElementsByTagName('BODY')[0]);
  14.      var zxctbdy=zxcclone.getElementsByTagName('TBODY')[0];
  15.      while (zxctbdy.firstChild) zxctbdy.removeChild(zxctbdy.firstChild);
  16.      var zxcrows=zxctable.rows;
  17.      for (var zxc0=0;zxc0<zxcrows.length;zxc0++){
  18.       zxcrows[zxc0].clone=zxcclone;
  19.       zxcrows[zxc0].table=zxctable;
  20.       zxcAddEvt(zxcrows[zxc0],'zxcDragRowSrt','mousedown');
  21.      }
  22.     }
  23.     
  24.     function zxcDragRowSrt(zxcevt){
  25.      if (this.table.rows.length<1) return;
  26.      document.onselectstart=function(event){window.event.returnValue=false; }
  27.      var zxcclone=zxcES(this.cloneNode(true),{left:zxcPos(this)[0]+'px',top:zxcPos(this)[1]+'px'},this.clone.getElementsByTagName('TBODY')[0]);
  28.      zxcES(this.clone,{left:zxcPos(this)[0]+'px',top:zxcPos(this)[1]+'px'});
  29.      var zxccells=this.cells;
  30.      for (var zxc0=0;zxc0<zxccells.length;zxc0++) zxcES(zxcclone.cells[zxc0],{width:zxccells[zxc0].width});
  31.      zxcDObj=[this.clone,this.clone.offsetLeft-zxcMse(zxcevt)[0],this.clone.offsetTop-zxcMse(zxcevt)[1],this];
  32.     }
  33.     
  34.     function zxcDragRow(zxcevt){
  35.      if (zxcDObj){
  36.       zxcES(zxcDObj[0],{left:(zxcMse(zxcevt)[0]+zxcDObj[1])+'px',top:zxcMse(zxcevt)[1]+zxcDObj[2]+'px'});
  37.       return false;
  38.      }
  39.     }
  40.     
  41.     function zxcRowMseUp(){
  42.      document.onselectstart=null;
  43.      if (!zxcDObj) return;
  44.      for (var zxc0=0;zxc0<zxcDTable.length;zxc0++){
  45.       var zxctpos=zxcPos(zxcDTable[zxc0][0]);
  46.       if (zxcDObj[3]&&zxcDTable[zxc0][1]==zxcDObj[3].cells.length&&zxctpos[0]-10<zxcDObj[0].offsetLeft&&zxctpos[0]+zxcDTable[zxc0][0].offsetWidth>zxcDObj[0].offsetLeft&& zxctpos[1]-zxcDObj[3].offsetHeight<zxcDObj[0].offsetTop &&zxctpos[1]+zxcDTable[zxc0][0].offsetHeight>zxcDObj[0].offsetTop){
  47.        var zxctrs=zxcDTable[zxc0][0].rows;
  48.        for (var zxc0a=0;zxc0a<zxcDTable[zxc0][1];zxc0a++) zxcES(zxcDObj[3].cells[zxc0a],{width:zxcDTable[zxc0][0].rows[0].cells[zxc0a].offsetWidth+'px'})
  49.        for (var zxc0b=0;zxc0b<zxctrs.length;zxc0b++){
  50.         if (zxcPos(zxctrs[zxc0b])[1]>zxcPos(zxcDObj[0])[1]&&zxctrs[zxc0b]!=zxcDObj[3]){
  51.          zxctrs[0].parentNode.insertBefore(zxcDObj[3],zxctrs[zxc0b]);
  52.          zxcDObj[3]=null;
  53.          break;
  54.         }
  55.        }
  56.        if (zxcDObj[3]) zxctrs[0].parentNode.appendChild(zxcDObj[3]);
  57.       }
  58.      }
  59.      var zxctr=zxcDObj[0].getElementsByTagName('TR')[0];
  60.      if (zxctr) zxctr.parentNode.removeChild(zxctr);
  61.      zxcDObj=false;
  62.     }
  63.     
  64.     function zxcMse(e){
  65.       if (!document.all){ return [e.clientX+zxcDocS()[0],e.clientY+zxcDocS()[1]] }
  66.       else { return [event.clientX,event.clientY]; }
  67.     }
  68.     
  69.     function zxcDocS(){
  70.      if (!document.body.scrollTop){ return [document.documentElement.scrollLeft,document.documentElement.scrollTop]; }
  71.      else { return [document.body.scrollLeft,zxcsy=document.body.scrollTop]; }
  72.     }
  73.     
  74.     function zxcES(zxcele,zxcstyle,zxcp,zxctxt){
  75.      if (typeof(zxcele)=='string'){ zxcele=document.createElement(zxcele); }
  76.      for (key in zxcstyle){ zxcele.style[key]=zxcstyle[key]; }
  77.      if (zxcp){ zxcp.appendChild(zxcele); }
  78.      if (zxctxt){ zxcele.appendChild(document.createTextNode(zxctxt)); }
  79.      return zxcele;
  80.     }
  81.     
  82.     function zxcPos(zxcobj){
  83.      zxclft=zxcobj.offsetLeft;
  84.      zxctop=zxcobj.offsetTop;
  85.      while(zxcobj.offsetParent!=null){
  86.       zxcpar=zxcobj.offsetParent;
  87.       zxclft+=zxcpar.offsetLeft;
  88.       zxctop+=zxcpar.offsetTop;
  89.       zxcobj=zxcpar;
  90.      }
  91.      return [zxclft,zxctop];
  92.     }
  93.     
  94.     function zxcEventAdd(zxco,zxct,zxcf) {
  95.      if ( zxco.addEventListener ){ zxco.addEventListener(zxct, function(e){ return zxco[zxcf](e);}, false); }
  96.      else if ( zxco.attachEvent ){ zxco.attachEvent('on'+zxct,function(e){ return zxco[zxcf](e); }); }
  97.      else {
  98.       var zxcPrev=zxco["on" + zxct];
  99.       if (zxcPrev){ zxco['on'+zxct]=function(e){ zxcPrev(e); zxco[zxcf](e); }; }
  100.       else { zxco['on'+zxct]=zxco[zxcf]; }
  101.      }
  102.     }
  103.     
  104.     function zxcAddEvt(zxcobj,zxcfun,zxcevt){
  105.      if (zxcobj['zxcadd'+zxcfun+zxcevt]) return;
  106.      zxcobj['zxcadd'+zxcfun+zxcevt]=window[zxcfun];
  107.      zxcEventAdd(zxcobj,zxcevt,'zxcadd'+zxcfun+zxcevt);
  108.     }
  109.     zxcAddEvt(document,'zxcDragRow','mousemove');
  110.     zxcAddEvt(document,'zxcRowMseUp','mouseup');
  111.     /*]]>*/
  112. </script>
  113.        
  114.   
  115.       </head>
  116.   
  117.       <body onload="zxcInitDragRow('dragDropTable')">
  118.   
  119.       <table id="dragDropTable" border="2" cellpadding="2" cellspacing="0">
  120.   
  121.       <thead>
  122.   
  123.       </thead>
  124.   
  125.       <tbody>
  126.   
  127.           <tr>
  128.   
  129.               <td><img src="javascript:iconForDragging;" width="16" height="16" ondragstart="startedDragging();"></td>
  130.   
  131.               <td>Row 0, Cell 1</td>
  132.   
  133.               <td>Row 0, Cell 2</td>
  134.   
  135.               <td>Row 0, Cell 3</td>
  136.   
  137.           </tr>
  138.   
  139.           <tr>
  140.   
  141.               <td><img src="javascript:iconForDragging;" width="16" height="16" ondragstart="startedDragging();"></td>
  142.   
  143.               <td>Row 1, Cell 1</td>
  144.   
  145.               <td>Row 1, Cell 2</td>
  146.   
  147.               <td>Row 1, Cell 3</td>
  148.   
  149.           </tr>
  150.   
  151.           <tr>
  152.   
  153.               <td><img src="javascript:iconForDragging;" width="16" height="16" ondragstart="startedDragging();"></td>
  154.   
  155.               <td>Row 2, Cell 1</td>
  156.   
  157.               <td>Row 2, Cell 2</td>
  158.   
  159.               <td>Row 2, Cell 3</td>
  160.   
  161.           </tr>
  162.   
  163.       </tbody>
  164.   
  165.       <tfoot></tfoot>
  166.   
  167.       </table>
  168.   
  169.       </body>
  170.   
  171.       </html>

mira este codigo lo puedes copiar completo y funciona, tiene un errorsillo quizas lo puedas solucionar tambien en el <body onload="zxcInitDragRow('dragDropTable')"> se hace referencia a la tabla por su "id" puedes usar dos tablas para pasar filas entre ellas esto lo harias asi:

<body onload="zxcInitDragRow('tabla1');zxcInitDragRow('t abla2');">

saludos.