Tema: Drag and Drop de Filas en una Tabla
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 18/01/2011, 12:57
imRicoh
 
Fecha de Ingreso: enero-2011
Mensajes: 49
Antigüedad: 13 años, 4 meses
Puntos: 0
Pregunta Drag and Drop de Filas en una Tabla
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
  1. <html>
  2. <head>    
  3.     <style type="text/css">
  4.         tr, tr td {
  5.             border: 1px #999999 solid;
  6.             border-bottom: 2px #999999 solid;
  7.             background-color: #FFFFFF;}
  8.         tr.underline, tr.underline td {
  9.             border-bottom: 2px #000000 solid;
  10.             background-color: #CCCCCC;}
  11.             
  12.     </style>
  13. <script type="text/javascript">
  14.     var draggingRow = false;
  15.     var sourceRow = null;
  16.     function startedDragging()
  17.     {
  18.         draggingRow = true;
  19.         sourceRow = event.srcElement.parentNode.parentNode;
  20.     }
  21.     function dragEnter()
  22.     {
  23.         if (draggingRow) window.event.returnValue = false;
  24.     }
  25.     function dragOver()
  26.     {
  27.         if (draggingRow)
  28.         {
  29.             var targetRow = event.srcElement;
  30.             while (targetRow.parentNode != null && targetRow.tagName && targetRow.tagName.toLowerCase() != 'tr')
  31.                 targetRow = targetRow.parentNode;
  32.             targetRow.className = 'underline';
  33.             window.event.returnValue = false;
  34.         }
  35.     }
  36.     function dragLeave()
  37.     {
  38.         if (draggingRow)
  39.         {
  40.             var targetRow = event.srcElement;
  41.             while (targetRow.parentNode != null && targetRow.tagName && targetRow.tagName.toLowerCase() != 'tr')
  42.                 targetRow = targetRow.parentNode;
  43.             targetRow.className = '';
  44.         }
  45.     }
  46.     function dropped()
  47.     {
  48.         if (draggingRow)
  49.         {
  50.             targetRow = event.srcElement;
  51.             while (targetRow.parentNode != null && targetRow.tagName && targetRow.tagName.toLowerCase() != 'tr')
  52.                 targetRow = targetRow.parentNode;
  53.             targetRow.className = '';
  54.             sourceRow.swapNode(targetRow);
  55.             draggingRow = false;
  56.         }
  57.     }
  58.     var iconForDragging = '#define icon_width 4\n#define icon_height 4\nstatic char icon_bits[] = { 0x05, 0x0A, 0x05, 0x0A };';
  59. </script>
  60.  
  61. </head>
  62. <body ondrop="dropped();">
  63. <table id="dragDropTable" border="0" cellpadding="2" cellspacing="0">
  64. <thead>
  65. </thead>
  66. <tbody>
  67.     <tr ondragenter="dragEnter();" ondragover="dragOver();" ondragleave="dragLeave();">
  68.         <td><img src="javascript:iconForDragging;" width="16" height="16" ondragstart="startedDragging();"></td>
  69.         <td>Row 0, Cell 1</td>
  70.         <td>Row 0, Cell 2</td>
  71.         <td>Row 0, Cell 3</td>
  72.     </tr>
  73.     <tr ondragenter="dragEnter();" ondragover="dragOver();" ondragleave="dragLeave();" ondrop="dropped();">
  74.         <td><img src="javascript:iconForDragging;" width="16" height="16" ondragstart="startedDragging();"></td>
  75.         <td>Row 1, Cell 1</td>
  76.         <td>Row 1, Cell 2</td>
  77.         <td>Row 1, Cell 3</td>
  78.     </tr>
  79.     <tr ondragenter="dragEnter();" ondragover="dragOver();" ondragleave="dragLeave();" ondrop="dropped();">
  80.         <td><img src="javascript:iconForDragging;" width="16" height="16" ondragstart="startedDragging();"></td>
  81.         <td>Row 2, Cell 1</td>
  82.         <td>Row 2, Cell 2</td>
  83.         <td>Row 2, Cell 3</td>
  84.     </tr>
  85. </tbody>
  86. <tfoot></tfoot>
  87. </table>
  88. </body>
  89. </html>

Saludos