Drag and Drop

<!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul {
            padding: 0px;
            margin: 0px;
        }

        #lista li {
            background-color: #1aad72;
            color: #fff;
            margin: 0 0 3px;
            padding: 10px;
            list-style: none;
            cursor: pointer;
        }
    </style>
</head>

<body>

    <ul id="lista">

        <li>1- abc</li>
        <li>2- def</li>
        <li>3- ghi</li>

    </ul>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"
        integrity="sha512-pumBsjNRGGqkPzKHndZMaAG+bir374sORyzM3uulLV14lN5LyykqNk8eEeUlUkB3U0M4FApyaHraT65ihJhDpQ=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>

    <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.min.js"
        integrity="sha256-eTyxS0rkjpLEo16uXTS0uVCS4815lc40K2iVpWDvdSY=" crossorigin="anonymous"></script>

    <script>
        $(document).ready(function () {
            $(function () {
                $("#lista").sortable({
                    update: function () {
                        var ordem_atual = $(this).sortable("serialize");

                        console.log('Disparando evento!');
                        // $.post("proc_alt_ordem.php", ordem_atual, function (retorno) {
                        //     //Imprimir retorno do arquivo proc_alt_ordem.php
                        //     $("#msg").html(retorno);
                        //     //Apresentar a mensagem leve
                        //     $("#msg").slideDown('slow');
                        //     retirarMsg();
                        // });
                    }
                });
            });

            //Retirar a mensagem após 1700 milissegundos
            function retirarMsg() {
                setTimeout(function () {
                    $("#msg").slideUp('slow', function () { });
                }, 1700);
            }
        });
    </script>
</body>

</html>
Editor is loading...