Comment déplacez-vous les éléments frères dans le prototype 1.5.1?

Question

J'essaie de configurer une fonction pour permettre le déplacement des lignes d'un tableau vers le haut et le bas. Le nombre de lignes de la table est dynamique - l'utilisateur peut appuyer sur un bouton pour ajouter des lignes supplémentaires. Il y a plusieurs champs dans chaque ligne du tableau. Il existe une ligne d'en-tête et une ligne de pied de page avec des noms de classes différents, d'où la vérification de hasClassName.

J’ai d’abord écrit cette fonction avec succès pour pouvoir l’utiliser avec Prototype 1.6 avant de réaliser que j’avais besoin de l’utiliser avec la version 1.5.1. Nous mettrons à niveau la dernière version de Prototype lorsque le temps sera disponible pour les tests, mais j’ai besoin que cela fonctionne avec la version actuelle de notre projet.

Le problème principal est qu’en 1.5, vous ne pouvez pas simplement insérer un élément en tant que contenu d’une insertion. Cela signifie que j'ai besoin du code HTML de l'élément que je veux insérer. Cela soulève le problème suivant: lorsque j’accède au code HTML de l’élément (variable "insertHTML"), il s’agit du code HTML original et n’inclut pas les informations entrées dans les éléments de formulaire liés par l'utilisateur.

Toute aide serait grandement appréciée.

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

Je suppose que vous pourriez utiliser une partie de ce code pour remplacer votre bloc if inférieur. Il utilise la fonction DOM native, c'est-à-dire 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);
  }
}

Pour votre référence, si vous êtes intéressé, voici mon code 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>

Merci.

Mise à jour: correction d'une faute de frappe ('{' et '}' manquants).