Cómo reordenar una fila de campos de entrada html sin entrar en AJAX

Question

Estoy generando un conjunto de filas de campos de texto de entrada html, que deseo que mis usuarios finales puedan reordenar. No quiero usar AJAX, pero estoy de acuerdo con Javascript.

Estoy de acuerdo con algunos botones de flecha colocados al costado de cada fila, que cuando se presionan mueven los campos hacia arriba y hacia abajo.

Mi problema con AJAX es que es demasiado pesado (50-60kb) solo para esta funcionalidad. Eché un vistazo a algún código de Yahoo (YUI), pero nuevamente, parece excesivo para una funcionalidad en particular. Encontré esto - http://www.danvk.org/wp/dragtable/ - que parece ser el código más ligero, pero solo permite el reordenamiento de columnas.

Estaré trabajando en la última opción, pero estoy abierto a otras ideas / enfoques sobre cómo hacer esto (es decir, para permitir que el usuario reordene los campos en fila).

PD: Supongo que no es importante para esta discusión, pero estoy usando PHP para generar estos campos de texto html.

Answer 1

Agregando a la respuesta de Josef ...

Según W3C DOM Level 2 Core especificación :

  

inserciónAntes

     

Inserta el nodo newChild antes del nodo secundario existente refChild. [...]   Si newChild ya está en el árbol, primero se elimina.

Por lo tanto, no es necesario llamar a removeChild () antes de llamar a insertChild () .

Además, la compatibilidad con IE6 DOM es muy mala, por lo que es posible que deba escribir un código específico. O tal vez prefiera no perder el tiempo apoyando este navegador, y solicite a los usuarios que actualicen . O, si realmente necesita admitir IE6, quizás usar una biblioteca de JavaScript (como jQuery) podría ser una solución fácil.

Editar: Esta es la solución final de JavaScript, basada en la respuesta de Josef:

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

Answer 2

Puede escribir una función de JavaScript similar a esta

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

y úsalo en tus filas de esta manera:

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

Estoy de acuerdo con usted en que realmente no necesita hacer referencia a un marco de Javascript para una tarea muy simple como esta.

Answer 3

Pareces estar confundido; AJAX es un término general que se refiere al uso de Javascript para cargar contenido adicional de un servidor a través de solicitudes secundarias sin cargar realmente una nueva página. Hay muchas bibliotecas Javascript diferentes que pueden manejar solicitudes AJAX.

Quizás esté pensando en una de las bibliotecas más populares como JQuery cuando dice "AJAX"?

En cuanto a su pregunta, una cosa para recordar es que con la configuración adecuada del servidor, los navegadores de los clientes almacenarán en caché las bibliotecas de Javascript después de la primera solicitud; por lo tanto, el tiempo de carga general constante no se ve tan afectado por el tamaño de tales bibliotecas, solo por la carga de la primera página. Incluso puede evitar eso si usa Copia alojada por Google de JQuery , que probablemente ya sea almacenada en caché por la gran mayoría de los visitantes de su sitio.