jQuery带有向上/向下箭头的排序卡

<!DOCTYPE html>
<html ng-app="app">
<head>
    <meta charset="utf-8">
    <title>ng-show and ng-hide directives</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body ng-app="app">
<div class="container">
    <div class="card mb-3" data-sort="0">
        <div class="card-header">
            Tekstveld
            <button type="button" class="btn btn-sm btn-primary float-right mr-1 sort-down"><i
                    class="fas fa-caret-down"></i></button>
            <button type="button" class="btn btn-sm btn-primary float-right mr-1 sort-up"><i
                    class="fas fa-caret-up"></i></button>
        </div>
        <div class="card-body p-0">
            <div class="editor"></div>
        </div>
    </div>
    <div class="card mb-3" data-sort="1">
        <div class="card-header">
            Voorbeeld
            <button type="button" class="btn btn-sm btn-primary float-right mr-1 sort-down"><i
                    class="fas fa-caret-down"></i></button>
            <button type="button" class="btn btn-sm btn-primary float-right mr-1 sort-up"><i
                    class="fas fa-caret-up"></i></button>
        </div>
        <div class="card-body p-0">
            <div class="editor"></div>
        </div>
    </div>
    <div class="card mb-3" data-sort="2">
        <div class="card-header">
            Lorem ipsum
            <button type="button" class="btn btn-sm btn-primary float-right mr-1 sort-down"><i
                    class="fas fa-caret-down"></i></button>
            <button type="button" class="btn btn-sm btn-primary float-right mr-1 sort-up"><i
                    class="fas fa-caret-up"></i></button>
        </div>
        <div class="card-body p-0">
            <div class="editor"></div>
        </div>
    </div>

        <div class="card mb-4" data-sort="2">
        <div class="card-header">
            Test
            <button type="button" class="btn btn-sm btn-primary float-right mr-1 sort-down"><i
                    class="fas fa-caret-down"></i></button>
            <button type="button" class="btn btn-sm btn-primary float-right mr-1 sort-up"><i
                    class="fas fa-caret-up"></i></button>
        </div>
        <div class="card-body p-0">
            <div class="editor"></div>
        </div>
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function () {
        setButtons();
        $(document).on('click', '.sort-down', function (e) {
            var cCard = $(this).closest('.card');
            var tCard = cCard.next('.card');
            cCard.insertAfter(tCard);
            setButtons();
            resetSort();
        });

        $(document).on('click', '.sort-up', function (e) {
            var cCard = $(this).closest('.card');
            var tCard = cCard.prev('.card');
            cCard.insertBefore(tCard);
            setButtons();
            resetSort();

        });

        function resetSort() {
            var i = 0;
            $('.card').each(function () {
                //$(this).data('sort',i);
                $(this).attr("data-sort", i);
                i++;
            });

        }

        function setButtons() {
            $('button').show();
            $('.card:first-child  button.sort-up').hide();
            $('.card:last-child  button.sort-down').hide();
        }

        function resetSort() {
            var i = 0;
            $('.card').each(function () {
                //$(this).data('sort',i);
                $(this).attr("data-sort", i);
                i++;
            });
        }
    });
</script>
</body>
</html>
在线运行
jQuery带有向上/向下箭头的排序卡

昵称
