Drag and Drop de Filas en una Tabla

imRicoh · #1 (**permalink**) 18/01/2011, 12:57

Manes como se hace para que las filas de una se puedan mover y rehubicar, me baje este codigo pero no funciona

Código HTML:

Ver original<html>
<head>    
    <style type="text/css">
        tr, tr td {
            border: 1px #999999 solid;
            border-bottom: 2px #999999 solid;
            background-color: #FFFFFF;}
        tr.underline, tr.underline td {
            border-bottom: 2px #000000 solid;
            background-color: #CCCCCC;}
            
    </style>
<script type="text/javascript">
    var draggingRow = false;
    var sourceRow = null;
    function startedDragging()
    {
        draggingRow = true;
        sourceRow = event.srcElement.parentNode.parentNode;
    }
    function dragEnter()
    {
        if (draggingRow) window.event.returnValue = false;
    }
    function dragOver()
    {
        if (draggingRow)
        {
            var targetRow = event.srcElement;
            while (targetRow.parentNode != null && targetRow.tagName && targetRow.tagName.toLowerCase() != 'tr')
                targetRow = targetRow.parentNode;
            targetRow.className = 'underline';
            window.event.returnValue = false;
        }
    }
    function dragLeave()
    {
        if (draggingRow)
        {
            var targetRow = event.srcElement;
            while (targetRow.parentNode != null && targetRow.tagName && targetRow.tagName.toLowerCase() != 'tr')
                targetRow = targetRow.parentNode;
            targetRow.className = '';
        }
    }
    function dropped()
    {
        if (draggingRow)
        {
            targetRow = event.srcElement;
            while (targetRow.parentNode != null && targetRow.tagName && targetRow.tagName.toLowerCase() != 'tr')
                targetRow = targetRow.parentNode;
            targetRow.className = '';
            sourceRow.swapNode(targetRow);
            draggingRow = false;
        }
    }
    var iconForDragging = '#define icon_width 4\n#define icon_height 4\nstatic char icon_bits[] = { 0x05, 0x0A, 0x05, 0x0A };';
</script>
 
</head>
<body ondrop="dropped();">
<table id="dragDropTable" border="0" cellpadding="2" cellspacing="0">
<thead>
</thead>
<tbody>
    <tr ondragenter="dragEnter();" ondragover="dragOver();" ondragleave="dragLeave();">
        <td><img src="javascript:iconForDragging;" width="16" height="16" ondragstart="startedDragging();"></td>
        <td>Row 0, Cell 1</td>
        <td>Row 0, Cell 2</td>
        <td>Row 0, Cell 3</td>
    </tr>
    <tr ondragenter="dragEnter();" ondragover="dragOver();" ondragleave="dragLeave();" ondrop="dropped();">
        <td><img src="javascript:iconForDragging;" width="16" height="16" ondragstart="startedDragging();"></td>
        <td>Row 1, Cell 1</td>
        <td>Row 1, Cell 2</td>
        <td>Row 1, Cell 3</td>
    </tr>
    <tr ondragenter="dragEnter();" ondragover="dragOver();" ondragleave="dragLeave();" ondrop="dropped();">
        <td><img src="javascript:iconForDragging;" width="16" height="16" ondragstart="startedDragging();"></td>
        <td>Row 2, Cell 1</td>
        <td>Row 2, Cell 2</td>
        <td>Row 2, Cell 3</td>
    </tr>
</tbody>
<tfoot></tfoot>
</table>
</body>
</html>

Saludos

Heiroon · #2 (**permalink**) 18/01/2011, 14:20

bueno la verdad no se si te ayude mucho pero leete las nuevas funciones de HTML5 entre las cuales se ha agregado el atributo drag and drop a ciertos objetos... espero que te sirva de algo..

lodoman · #3 (**permalink**) 18/01/2011, 16:46

Código HTML:

Ver original<html>
   
      <head>    
   
        <script language="JavaScript" type="text/javascript">
    /*<![CDATA[*/
    var zxcDObj;
    var zxcDTable=[];
    
    function zxcInitDragRow(zxcid){
     var zxctable=document.getElementById(zxcid);
     zxcDTable.push([zxctable,zxctable.rows[0].cells.length]);
     zxcclone=zxcES(zxctable.cloneNode(true),{position:'absolute'},document.getElementsByTagName('BODY')[0]);
     var zxctbdy=zxcclone.getElementsByTagName('TBODY')[0];
     while (zxctbdy.firstChild) zxctbdy.removeChild(zxctbdy.firstChild);
     var zxcrows=zxctable.rows;
     for (var zxc0=0;zxc0<zxcrows.length;zxc0++){
      zxcrows[zxc0].clone=zxcclone;
      zxcrows[zxc0].table=zxctable;
      zxcAddEvt(zxcrows[zxc0],'zxcDragRowSrt','mousedown');
     }
    }
    
    function zxcDragRowSrt(zxcevt){
     if (this.table.rows.length<1) return;
     document.onselectstart=function(event){window.event.returnValue=false; }
     var zxcclone=zxcES(this.cloneNode(true),{left:zxcPos(this)[0]+'px',top:zxcPos(this)[1]+'px'},this.clone.getElementsByTagName('TBODY')[0]);
     zxcES(this.clone,{left:zxcPos(this)[0]+'px',top:zxcPos(this)[1]+'px'});
     var zxccells=this.cells;
     for (var zxc0=0;zxc0<zxccells.length;zxc0++) zxcES(zxcclone.cells[zxc0],{width:zxccells[zxc0].width});
     zxcDObj=[this.clone,this.clone.offsetLeft-zxcMse(zxcevt)[0],this.clone.offsetTop-zxcMse(zxcevt)[1],this];
    }
    
    function zxcDragRow(zxcevt){
     if (zxcDObj){
      zxcES(zxcDObj[0],{left:(zxcMse(zxcevt)[0]+zxcDObj[1])+'px',top:zxcMse(zxcevt)[1]+zxcDObj[2]+'px'});
      return false;
     }
    }
    
    function zxcRowMseUp(){
     document.onselectstart=null;
     if (!zxcDObj) return;
     for (var zxc0=0;zxc0<zxcDTable.length;zxc0++){
      var zxctpos=zxcPos(zxcDTable[zxc0][0]);
      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){
       var zxctrs=zxcDTable[zxc0][0].rows;
       for (var zxc0a=0;zxc0a<zxcDTable[zxc0][1];zxc0a++) zxcES(zxcDObj[3].cells[zxc0a],{width:zxcDTable[zxc0][0].rows[0].cells[zxc0a].offsetWidth+'px'})
       for (var zxc0b=0;zxc0b<zxctrs.length;zxc0b++){
        if (zxcPos(zxctrs[zxc0b])[1]>zxcPos(zxcDObj[0])[1]&&zxctrs[zxc0b]!=zxcDObj[3]){
         zxctrs[0].parentNode.insertBefore(zxcDObj[3],zxctrs[zxc0b]);
         zxcDObj[3]=null;
         break;
        }
       }
       if (zxcDObj[3]) zxctrs[0].parentNode.appendChild(zxcDObj[3]);
      }
     }
     var zxctr=zxcDObj[0].getElementsByTagName('TR')[0];
     if (zxctr) zxctr.parentNode.removeChild(zxctr);
     zxcDObj=false;
    }
    
    function zxcMse(e){
      if (!document.all){ return [e.clientX+zxcDocS()[0],e.clientY+zxcDocS()[1]] }
      else { return [event.clientX,event.clientY]; }
    }
    
    function zxcDocS(){
     if (!document.body.scrollTop){ return [document.documentElement.scrollLeft,document.documentElement.scrollTop]; }
     else { return [document.body.scrollLeft,zxcsy=document.body.scrollTop]; }
    }
    
    function zxcES(zxcele,zxcstyle,zxcp,zxctxt){
     if (typeof(zxcele)=='string'){ zxcele=document.createElement(zxcele); }
     for (key in zxcstyle){ zxcele.style[key]=zxcstyle[key]; }
     if (zxcp){ zxcp.appendChild(zxcele); }
     if (zxctxt){ zxcele.appendChild(document.createTextNode(zxctxt)); }
     return zxcele;
    }
    
    function zxcPos(zxcobj){
     zxclft=zxcobj.offsetLeft;
     zxctop=zxcobj.offsetTop;
     while(zxcobj.offsetParent!=null){
      zxcpar=zxcobj.offsetParent;
      zxclft+=zxcpar.offsetLeft;
      zxctop+=zxcpar.offsetTop;
      zxcobj=zxcpar;
     }
     return [zxclft,zxctop];
    }
    
    function zxcEventAdd(zxco,zxct,zxcf) {
     if ( zxco.addEventListener ){ zxco.addEventListener(zxct, function(e){ return zxco[zxcf](e);}, false); }
     else if ( zxco.attachEvent ){ zxco.attachEvent('on'+zxct,function(e){ return zxco[zxcf](e); }); }
     else {
      var zxcPrev=zxco["on" + zxct];
      if (zxcPrev){ zxco['on'+zxct]=function(e){ zxcPrev(e); zxco[zxcf](e); }; }
      else { zxco['on'+zxct]=zxco[zxcf]; }
     }
    }
    
    function zxcAddEvt(zxcobj,zxcfun,zxcevt){
     if (zxcobj['zxcadd'+zxcfun+zxcevt]) return;
     zxcobj['zxcadd'+zxcfun+zxcevt]=window[zxcfun];
     zxcEventAdd(zxcobj,zxcevt,'zxcadd'+zxcfun+zxcevt);
    }
    zxcAddEvt(document,'zxcDragRow','mousemove');
    zxcAddEvt(document,'zxcRowMseUp','mouseup');
    /*]]>*/
</script>
       
  
      </head>
  
      <body onload="zxcInitDragRow('dragDropTable')">
  
      <table id="dragDropTable" border="2" cellpadding="2" cellspacing="0">
  
      <thead>
  
      </thead>
  
      <tbody>
  
          <tr>
  
              <td><img src="javascript:iconForDragging;" width="16" height="16" ondragstart="startedDragging();"></td>
  
              <td>Row 0, Cell 1</td>
  
              <td>Row 0, Cell 2</td>
  
              <td>Row 0, Cell 3</td>
  
          </tr>
  
          <tr>
  
              <td><img src="javascript:iconForDragging;" width="16" height="16" ondragstart="startedDragging();"></td>
  
              <td>Row 1, Cell 1</td>
  
              <td>Row 1, Cell 2</td>
  
              <td>Row 1, Cell 3</td>
  
          </tr>
  
          <tr>
  
              <td><img src="javascript:iconForDragging;" width="16" height="16" ondragstart="startedDragging();"></td>
  
              <td>Row 2, Cell 1</td>
  
              <td>Row 2, Cell 2</td>
  
              <td>Row 2, Cell 3</td>
  
          </tr>
  
      </tbody>
  
      <tfoot></tfoot>
  
      </table>
  
      </body>
  
      </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.

_Adrian_ · #4 (**permalink**) 18/01/2011, 23:15

Aquí explica como puedes hacer eso, pero está en inglés.

imRicoh · #5 (**permalink**) 19/01/2011, 13:12

@lodoman codigo esta perfecto, pero quiero hacerlo para que las filas solo se puedan mover en la misma tabla solo para cambiar de posiciones a las filas, si lo hace pero cuando lo muevo la tabla cambia de tamaño. Como lo arreglo esto?

Saludos