Estou desenvolvendo um site de plataforma de curso, cada curso pode ter muitas aulas.
No banco de dados, cada aula tem uma coluna chamada position
, então para o usuário final, bastaria fazer uma consulta listando por ordem da position
, então as aulas seriam exibidas na ordem certa.
O problema é no painel administrativo, após cadastrar todas as aulas, eu gostaria de organiza-las arrastando para a posição que eu desejo e depois salvar, mandando para o banco de dados a position
de cada aula,
Arrastar como neste exemplo
https://drive.google.com/file/d/1L__uKtZXrSC3huhoCuZ-AaKlPOCPtC3U/view
no meu dashboard, o HTML e CSS está semelhante a isso
.box {
width: 400px;
height: 30px;
line-height: 30px;
background: #232323;
color: #fff;
border-radius: 5px;
margin: 1rem 0px;
padding: 0.5rem;
}
<div class="box" position="1">position 1 - learn HTML</div>
<div class="box" position="2">position 2 - learn CSS</div>
<div class="box" position="3">position 3- learn JavaScripte</div>
Então como faço pra arrastar as divs/lessons, mantendo sempre o atributo position
com o valor correto da posição em que a div está?