Come riordinare una riga di campi di input HTML senza entrare in AJAX

Question

Sto generando una serie di righe di campi di testo di input HTML, che voglio che i miei utenti finali possano riordinare. Non voglio usare AJAX, ma sto bene con Javascript.

Sto bene con alcuni pulsanti freccia posizionati sul lato di ogni riga, che quando premuti spostano i campi su e giù.

Il mio problema con AJAX è che è troppo pesante (50-60kb) proprio per questa funzionalità. Ho dato un'occhiata ad alcuni codici Yahoo (YUI), ma ancora una volta, sembra eccessivo per una particolare funzionalità. Ho trovato questo - http://www.danvk.org/wp/dragtable/ - che sembra il codice più leggero, ma consente solo il riordino delle colonne.

Lavorerò sull'ultima opzione, ma sono aperto ad altri pensieri / approcci su come farlo (ad esempio, per consentire all'utente di riordinare i campi di riga).

PS: non è importante per questa discussione suppongo, ma sto usando PHP per generare questi campi di testo html.

Answer 1

Aggiunta alla risposta di Josef ...

Secondo W3C DOM Level 2 Core specifica :

  

insertBefore

     

Inserisce il nodo newChild prima del nodo figlio esistente refChild. [...]   Se il newChild è già nella struttura, viene prima rimosso.

Pertanto, non è necessario chiamare removeChild () prima di chiamare insertChild () .

Inoltre, il supporto IE6 DOM è pessimo, quindi potrebbe essere necessario scrivere un codice specifico per esso. O forse preferiresti non perdere tempo a supportare questo browser e chiedere agli utenti di eseguire l'aggiornamento . Oppure, se hai davvero bisogno di supportare IE6, forse usare una libreria JavaScript (come jQuery) potrebbe essere una soluzione facile.

Modifica: Questa è la soluzione JavaScript finale, basata sulla risposta di Josef:

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

Answer 2

Puoi scrivere una funzione JavaScript simile a questa

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

e usalo nelle tue righe in questo modo:

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

Sono d'accordo con te sul fatto che non hai davvero bisogno di fare riferimento a un framework Javascript per un compito molto semplice come questo.

Answer 3

Sembri essere confuso; AJAX è un termine generale che si riferisce all'utilizzo di Javascript per caricare contenuti extra da un server tramite richieste secondarie senza caricare effettivamente una nuova pagina. Esistono molte diverse librerie Javascript in grado di gestire le richieste AJAX.

Forse stai pensando a una delle librerie più popolari come JQuery quando dici " AJAX " ;?

Per quanto riguarda la tua domanda - una cosa da ricordare è che con una corretta configurazione del server, i browser client memorizzeranno nella cache le librerie Javascript dopo la prima richiesta; quindi il tempo di caricamento complessivo coerente non è influenzato dalle dimensioni di tali librerie, ma solo dal caricamento della prima pagina. Puoi evitarlo anche se usi Copia ospitata su Google di JQuery , che probabilmente sarà già memorizzata nella cache dalla maggior parte dei visitatori del tuo sito.