¿Cómo se mueven los elementos de hermanos ordenados arriba / abajo en el prototipo 1.5.1?

Question

Estoy intentando configurar una función para permitir mover 'arriba' y 'abajo' de una fila de la tabla en un formulario. El número de filas de la tabla es dinámico: el usuario puede presionar un botón para agregar filas adicionales. Hay varios campos en cada fila de la tabla. Hay una fila de encabezado y una fila de pie de página con diferentes nombres de clase, de ahí la comprobación de hasClassName.

Primero escribí esta función con éxito para usarla con Prototype 1.6 antes de darme cuenta de que necesito que funcione con la versión 1.5.1. Estaremos actualizando a la última versión de Prototype cuando haya tiempo disponible para las pruebas, pero necesito que esto funcione en la versión actual de nuestro proyecto.

El problema principal es que en 1.5 no puedes simplemente insertar un Elemento como el contenido de una inserción. Esto significa que necesito el HTML del elemento que quiero insertar. Esto plantea el problema de que cuando accedo al HTML para el elemento (variable " insertHTML ") este es el HTML original y no incluye la información ingresada en los elementos de formulario relacionados por el usuario.

Cualquier ayuda sería muy apreciada.

moveDataDef: function(num, dir) {
    var targRow = $('dataDefItem'+num);
    var content = targRow.innerHTML;
    var siblings;
    var insertHTML = targRow.inspect() + targRow.innerHTML + '</tr>';

    if(dir == 'up')
        siblings = targRow.previousSiblings();
    else
        siblings = targRow.nextSiblings();

    if (siblings[0].hasClassName('dataDefItem')) {
        targRow.remove();
        if(dir == 'up')
            new Insertion.Before(siblings[siblings.length - 1].id, targRow);
        else
            new Insertion.After(siblings[0].id, targRow);
    }
}

Answer 1

Supongo que podría usar parte de este código para reemplazar su bloque if más bajo. Utiliza la función DOM nativa, es decir, insertBefore () :

if (siblings[0].hasClassName('dataDefItem')) {
  var targetParent = targRow.parentNode;
  var sibling = siblings[0];

  if(dir == 'up'){
    targRow.remove();
    targetParent.insertBefore(targRow, sibling);
  } else {
    sibling.remove();
    targetParent.insertBefore(sibling, targRow);
  }
}

Para su referencia, si está interesado, este es mi código POC:

<table id="tb1">
<tbody>
<tr id="tr1"><td>1</td></tr>
<tr id="tr2"><td>2</td></tr>
<tr id="tr3"><td>3</td></tr>
</tbody>
</table>

<script type="text/javascript">
/* <![CDATA[ */
(function(){
var trr3 = $('tr3');
var tp = trr3.parentNode; 
var trr1 =trr3.previousSiblings();
trr3.remove();
tp.insertBefore(trr3, trr1[0]);
})();
/* ]]> */
</script>

Gracias.

Actualizar: corregir error tipográfico (faltan '{' y '}').