Como reordenar uma linha de campos de entrada html sem entrar em AJAX

Question

Eu estou gerando um conjunto de linhas de campos de texto de entrada html, o que eu quero meus usuários finais para ser capaz de reordenar. Eu não quero usar AJAX, mas estou bem com Javascript.

Eu estou bem com alguns botões de seta colocados no lado de cada linha, que quando pressionado mover os campos para cima e para baixo.

O meu problema com AJAX é que é muito pesado (50-60kb) para apenas esta funcionalidade. Eu tinha um olhar para algum código Yahoo (YUI), mas novamente, parece um exagero para uma funcionalidade particular. Achei isso - http://www.danvk.org/wp/dragtable/ - que é parece ser o código mais leve, mas só permite a reordenação da coluna.

Eu vou estar trabalhando na última opção, mas estou aberto a outros pensamentos / abordagens sobre como fazer isso (ou seja, para permitir que o usuário para reordenar os campos de linha-wise).

PS:. Não importante para esta discussão eu suponho, mas eu estou usando PHP para gerar esses campos de texto HTML

Answer 1

Somando-se a resposta do Josef ...

De acordo com a W3C DOM Nível 2 Núcleo especificação :

insertBefore

Insere o nó newChild antes do refChild nó filho existente. [...] Se o newChild já está na árvore, ela é primeiro removida.

Assim, não há necessidade de removeChild() chamada antes de chamar insertChild().

Além disso, o apoio IE6 DOM é muito ruim, então você pode precisar escrever código específico para ele. Ou talvez você prefere não perder tempo apoiar este navegador e pedir aos usuários para atualizar . Ou, se você realmente precisa para suportar o IE6, talvez usando uma biblioteca de JavaScript (como jQuery) poderia ser uma solução fácil.

Editar: Esta é a solução final JavaScript, com base na resposta de Josef:

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

Answer 2

Você pode escrever uma função javascript semelhante a esta

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

e usá-lo em suas fileiras como esta:

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

Eu concordo com você que você realmente não precisa fazer referência um quadro Javascript para uma tarefa muito simples como isto.

Answer 3

Você parece estar confuso; AJAX é um termo geral que se refere ao uso de Javascript para carregar conteúdo extra a partir de um servidor através de sub-pedidos sem realmente carregar uma nova página. Existem muitas bibliotecas diferentes Javascript que podem lidar com solicitações de AJAX.

Talvez você está pensando de uma das bibliotecas mais populares como JQuery quando você diz "AJAX"?

Quanto à sua pergunta - uma coisa a lembrar é que, com a configuração do servidor adequada, navegadores cliente irá armazenar em cache geral bibliotecas Javascript após a primeira solicitação; assim o tempo de carga total consistente não é tão afetado pelo tamanho de tais bibliotecas - só isso primeiro carregamento da página. Você pode evitar até mesmo que se você usar o cópia hospedada no Google da JQuery , que é provável que já esteja armazenada em cache pela grande maioria de visitantes ao seu site.