Как обновить номер порядка сортировки после перемещения элемента списка из одного списка в другой в jQuery сортировке пользовательского интерфейса - PullRequest
Новая
       39

Как обновить номер порядка сортировки после перемещения элемента списка из одного списка в другой в jQuery сортировке пользовательского интерфейса

1 голос
/ 13 января 2020

Я использую jquery ui sort для перемещения элементов из списка 1 в список 2, для каждого элемента у меня есть какое-то число, поэтому при каждом перемещении элемента мне нужны оба списка 1, список 2 должен обновлять свой номер сортировки. например: список 1 имеет 4 элемента, если элемент 3 перемещен из списка 1 в список 2, то список 1 должен изменить порядок, как элемент 1 элемент 2, элемент 3, так же, как после перемещения элемента в список 2, список 2 также переупорядочит свой номер и станет элементом 5.

css: 

 <style>
        .sortable_list {
            border: 1px solid #eee;
            width: 142px;
            min-height: 20px;
            list-style-type: none;
            margin: 0;
            padding: 5px 0 0 0;
            float: left;
            margin-right: 10px;
        }

        .sortable_list li {
            margin: 0 5px 5px 5px;
            padding: 5px;
            font-size: 1.2em;
            width: 120px;
        }
    </style>

<link rel="stylesheet" href="jquery-ui.css">
<script src="jquery-1.10.2.js"></script>
<script src="jquery-ui.js"></script>

html код: 

<ul id="sortable1" class="sortable_list connectedSortable">
    <li class="ui-state-default">1-List 1 - Item 1</li>
    <li class="ui-state-default">2-List 1 - Item 2</li>
    <li class="ui-state-default">3-List 1 - Item 3</li>
    <li class="ui-state-default">4-List 1 - Item 4</li>

</ul>
<ul id="sortable2" class="sortable_list connectedSortable">
    <li class="ui-state-highlight">1-List 2 - Item 1</li>
    <li class="ui-state-highlight">2-List 2 - Item 2</li>
    <li class="ui-state-highlight">3-List 2 - Item 3</li>
    <li class="ui-state-highlight">4-List 2 - Item 4</li>

</ul>  

<script>
    $(function () {
        $(".sortable_list").sortable({
            connectWith: ".connectedSortable",
            receive: function (event, ui) {

           var sender=ui.sender[0].id;
                 $('#'+sender).each(function (i) {
            var numbering = i + 1;
            $(this).text(numbering);
        });

            }
        }).disableSelection();
    });
</script>

1 Ответ

1 голос
/ 13 января 2020

Используйте какой-нибудь значок или интервал, чтобы отсортировать его по номеру, который я обновлю здесь 

<ul id="sortable1" class="sortable_list connectedSortable">
    <li class="ui-state-default"><span class="number"></span>List 1 - Item 1</li>
    <li class="ui-state-default"><span class="number"></span>List 1 - Item 2</li>
    <li class="ui-state-default"><span class="number"></span>List 1 - Item 3</li>
    <li class="ui-state-default"><span class="number"></span>List 1 - Item 4</li>

</ul>

В Jquery напишите каждую функцию для ее итерации 

$("#" + sender + " li").each(function (n) {
   $(this).find('.number').html(n + 1);
});
...