drag Divs/lessons and get Div’s position

Asked

Viewed 146 times

0

I am developing a course platform website, each course can take many lessons.

In the database, each class has a column called position, then for the end user, simply make a listing in order of the position, then the classes would be displayed in the right order.

The problem is in the administrative panel, after registering all classes, I would like to organize them by dragging them to the position I wish and then saving, sending to the database to position of each class,

Drag as in this example

https://drive.google.com/file/d/1L__uKtZXrSC3huhoCuZ-AaKlPOCPtC3U/view

on my Dashboard, HTML and CSS is similar to this

.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>

So how do I drag the Divs/lessons, always keeping the atributo position with the correct value of the position the div is in?

javascript html css html5 css3

1 answer

0

I made an example here using jQuery, where you change the order of div’s and is returned to the current order of div’s. Follows the code:

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>

Browser other questions tagged javascript html css html5 css3

You are not signed in. Login or sign up in order to post.