0

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á?

1 Resposta 1

0

Fiz um exemplo aqui usando jQuery, aonde você altera a ordem das div's e é retornado a ordem atual das div's. Segue o código:

HTML + JS

<!DOCTYPE html>
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
    <style type="text/css">
    .draggable{ 
        padding-bottom: 20px; 
        padding-top: 20px; 
        cursor: move;
        border: #000 1px solid;
        text-align: center;
        font-weight: bold
    }
    </style>
    <script>
        $(document).ready(function() {
            $(".droppable").sortable({
                update: function( event, ui ) {
                    Dropped();
                }
            });
        });
    

    
        function Dropped(event, ui){
            $(".draggable").each(function(){
                //var p = $(this).position();
                alert($(this).html());
            });
        }
    </script>
</head>
<body>
    <div class="droppable">
        <div id="div1" class="draggable">
            Div 1
        </div>
        <div id="div2" class="draggable">
            Div 2
        </div>
        <div id="div3" class="draggable">
            Div 3
        </div>
    </div>
    </br>
</body>
</html>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .