Comment réorganiser une ligne de champs de saisie HTML sans entrer dans AJAX

Question

Je génère un ensemble de lignes de champs de saisie HTML que je souhaite que les utilisateurs finaux puissent réorganiser. Je ne veux pas utiliser AJAX, mais javascript me convient.

Les boutons fléchés placés sur le côté de chaque rangée me conviennent, ce qui permet de déplacer les champs de haut en bas lorsque vous appuyez dessus.

Mon problème avec AJAX est qu’il est trop lourd (50-60 Ko) pour cette fonctionnalité. J'ai jeté un coup d'œil à un code Yahoo (YUI), mais encore une fois, il semble exagéré pour une fonctionnalité particulière. J'ai trouvé ceci - http://www.danvk.org/wp/dragtable/ - ce qui semble être le code le plus léger, mais n'autorise que la réorganisation des colonnes.

Je travaillerai sur la dernière option, mais je suis ouvert à d’autres réflexions / approches sur la manière de procéder (par exemple, pour permettre à l’utilisateur de réorganiser les champs rangés par rang).

PS: Je suppose que ce n’est pas important pour cette discussion, mais j’utilise PHP pour générer ces champs de texte html.

Answer 1

Ajout à la réponse de Josef ...

Selon W3C DOM, niveau 2 de base spécification :

  

insérerAvant

     

Insère le noeud newChild avant le noeud enfant existant, refChild. [...]   Si newChild est déjà dans l'arborescence, il est d'abord supprimé.

Ainsi, il n'est pas nécessaire d'appeler removeChild () avant d'appeler insertChild () .

De plus, la prise en charge du DOM IE6 est très mauvaise, vous devrez peut-être écrire un code spécifique pour cela. Ou peut-être préférez-vous ne pas perdre de temps à prendre en charge ce navigateur et demander aux utilisateurs d'effectuer la mise à niveau . Ou, si vous avez vraiment besoin de supporter IE6, utiliser une bibliothèque JavaScript (comme jQuery) pourrait être une solution simple.

Modifier: voici la solution JavaScript finale, basée sur la réponse de Josef:

function up(row) {
    var prevRow = row.previousSibling;
    if(prevRow) {
        row.parentNode.insertBefore(row, prevRow);
    }
}

Answer 2

Vous pouvez écrire une fonction javascript similaire à celle-ci

function up(row) {
    var prevRow = row.previousElementSibling;
    if(prevRow != null) {
        row.parentNode.removeChild(row);
        document.body.insertBefore(row, prevRow);
    }
};

et utilisez-le dans vos lignes comme ceci:

<p>
    <input type="text"/>
    <a onclick="up(this.parentNode)">Up</a>
</p>

Je suis d'accord avec vous pour dire qu'il n'est pas vraiment nécessaire de référencer un framework Javascript pour une tâche aussi simple que celle-ci.

Answer 3

Vous semblez confus; AJAX est un terme général désignant l’utilisation de Javascript pour charger du contenu supplémentaire à partir d’un serveur via des sous-requêtes sans charger réellement une nouvelle page. Il existe de nombreuses bibliothèques Javascript pouvant gérer les requêtes AJAX.

Vous pensez peut-être à l'une des bibliothèques les plus populaires, comme JQuery, lorsque vous dites "AJAX"?

En ce qui concerne votre question - une chose à garder à l'esprit est qu'avec une configuration de serveur appropriée, les navigateurs clients vont généralement mettre en cache les bibliothèques Javascript après la première requête; ainsi, le temps de chargement global ne dépend pas de la taille de ces bibliothèques, mais uniquement du chargement de la première page. Vous pouvez même éviter cela si vous utilisez Copie de JQuery hébergée par Google , qui est probablement déjà mise en cache par la grande majorité des visiteurs de votre site.