Javascript: Lista, Drag and Drop e Ajax para Ordernar

Este artigo veio através da necessidade de um de nossos clientes, que pediu o seguinte:

“Na listagem de produtos eu quero poder organizar a forma eles irão aparecer. Detalhe: Já cadastrei tudo.”

A partir desta exigência foi pensado o seguinte:

“Primeiro preciso fazer com que as linhas se movimentem dentro do bloco principal (drag and drop), depois eu atualizo o banco de dados (Ajax)”

O sistema estava desenvolvido em tabelas (tables) para a listagem de produtos (erro comum) por isso esse artigo foi escrito visando tabelas e não lista (ul,li), porém o artigo serve em igual para ambas formas de listagem (aconselha-se lista).

Exibir post completo