Grid / Table com opção de organizar os itens arrastando

[DiegoAngra07 21]

Boa tarde galera, tudo certo?

 

Não sou muito experiente no mundo da web, portanto venho aqui pedir sugestões de como implementar um determinado mecanismo.

 

- Primeiro vou explicar o processo:

 

Possuo um cadastro / tabela no banco bem simples: ID, nome e ORDENAÇÃO. Este campo ordenação é o que define critério para que os registros sejam buscados / exibidos. É uma tabela que serve para categorizar itens dentro do sistema, e tais itens devem ser buscados com ORDER BY por este campo. Por exemplo:

 

Tabela Categoria

ID | Nome | Ordenacao

 

1 | Computadores | 1

2 | Mouses | 2

3 | Monitores | 3

 

Tabela Item

ID | Nome | idCategoria (FK da outra tabela)

 

1 | Dell Inspiron | 1

2 | HP Mouse 3000 | 2

3 | Dell Optiplex | 1

1 | Smasung HDTV | 3

...

 

Desta forma eu busco os itens dando JOIN na categoria e ordenando pelo seu campo Ordenacao.

SELECT * FROM item i JOIN categoria c ON c.id = i.idCategoria ORDER BY c.ordenacao

Este processo no entanto não fica a encargo do programador ou administrador do sistema controlar, e sim de um determinado usuário, e num belo dia o usuário decide que os Monitores devem ser listados antes que os Mouses (sendo assim a ordenação deve ser invertida).

 

---------------

 

- Aqui vem minha busca por sugestão de como fazer isso na web. A minha ideia inicial foi de uma espécie de Grid ou Table, em que o usuário possa arrastar as categorias para cima ou para baixo, e quando clicar em Salvar eu atualize o campo no banco de acordo com a ordem que ele deixou. Tem como fazer isso usando HTML e JS? Talvez não precise nem arrastar e soltar (apesar de que ficaria super legal), mas só uma forma de tabela onde pudesse mover para cima / baixo através de uns Buttons ou menu de contexto.

 

Eu sei que o mais simples seria abrir o cadastro da categoria e alterar o campo Ordenação, mas ao meu ver parece um processo chato e não-moderno.

 

Se alguém tiver outras sugestões de como fazer, fique a vontade.

 

Grato desde já e obrigado pela atenção.

 

[angelorubin 142]

Você pode utilizar jQueryUI para isso.

[DiegoAngra07 21]

Você pode utilizar jQueryUI para isso.

 

Muito obrigado era exatamente minha ideia.