Блог

Главная - Вопросы по программированию - Сортируемый jQueryUI — функциональность для перемещения элементов только в пределах подсписка (3-й pos)

Сортируемый jQueryUI — функциональность для перемещения элементов только в пределах подсписка (3-й pos)

#javascript #php #html #jquery #jquery-ui-sortable

#javascript #php #HTML #jquery ( jquery ) #jquery-ui-сортируемый

Вопрос:

Я пытаюсь установить определенную функциональность с помощью jquery sortable. Кажется, я близок к цели, но столкнулся с проблемой. Мне нужно, чтобы подпункты переместились только на позиции 3-го уровня — в разделе типы счетов

http://jsfiddle.net/Davos8549/x6f0upng/1/

Я только хочу, чтобы подпункты можно было перетаскивать в другие списки с классом =»hasItems».

Я все равно должен иметь возможность перемещать AR, VZ, BANK в пределах его основного контейнера «Актив». Но я не должен быть в состоянии перенести все это в подсписок (и это проблема, с которой я сталкиваюсь сейчас).

 Asset
    AR
        subitem2-1
        subitem3-15
        subitem3-25
        subitem2-2
        subitem2-3
        subitem2-4
    VZ
        subitem3-1
        subitem3-2
        subitem1-35
        subitem3-3
        subitem3-4
    Bank
        subitem1-1
        subitem1-2
        subitem3-45
        subitem1-3
        subitem1-4
Liability
    Bank5
        subitem1-15
        subitem1-25
        subitem1-45
    AR5
        subitem2-15
        subitem2-25
        subitem2-35
        subitem2-45
    VZ5
        subitem3-35

Я считаю, что решение может быть в этом коде:

 <script>
            $(function() {
                $('ul.mainlist').sortable({
                    connectWith: 'ul.mainlist',
                    beforeStop: function(ev, ui) {
                        if ($(ui.item).hasClass('hasItems') amp;amp; $(ui.placeholder).parent()[0] != this) {
                            $(this).sortable('cancel');
                        }
                    }
                });
                $('ul.sublist').sortable({
                    connectWith: 'ul.sublist'
                });
            });
        </script>

Ответ №1:

Вам нужно быть более конкретным при определении ваших элементов DOM, которые вы хотите переместить:

Сначала я внес некоторые незначительные изменения в ваш HTML-код, добавив класс «group» к <li> тегу групп Bank и Passivity, что упрощает их идентификацию.

Я также добавил класс «connected» к подспискам, которые я хочу сделать взаимозаменяемыми, чтобы в качестве примера вы могли иметь как полные взаимозаменяемые подпункты, так и подпункты, которые можно сортировать только внутри их собственной группы. Этот класс «connected» используется в sortable() connectWith функциональности функции, см. Подключение списков

В случае, если группа становится пустой, вам необходимо определить минимальную высоту, чтобы иметь возможность перемещать элементы обратно в эту пустую группу.

затем я изменил сортировку на:

 $(function() {
    $('li.group ul.sublist').sortable({

    });
    $('.hasItems ul.sublist').sortable({
            connectWith: ".connected"
    }).disableSelection();
});

который теперь позволяет вам перемещаться по вашему запросу.

проверьте скрипку для получения подробной информации или

 $(function() {
    $('li.group ul.sublist').sortable({

    });
    $('.hasItems ul.sublist').sortable({
            connectWith: ".connected"
    }).disableSelection();
}); 
 body
{
    font-family: Arial, Tahoma, San-Serif;
    font-size: 12px;
}
ul {
    padding: 0;
    list-style-type: none;
}
p
{
    margin: 0 0 20px;
}
ul.mainlist
{
    float: left;
    margin: 0 20px 0 0;
    width: 100px;
}

ul.mainlist li
{
    background: #fff;
    border: solid 1px #ccc;
    padding: 10px;
    width:100%;
}
ul.sublist 
{
  min-height: 35px;
  background: gold;
} 
 <link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script
              src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"
              integrity="sha256-T0Vest3yCU7pafRw9r settMBX6JkKN06dqBnpQ8d30="
              crossorigin="anonymous"></script>
        
        <p>sublists shouldn't be able to be dragged out of their normal list</p>
<ul id="list1" class='mainlist'>
                <li class="group">Asset
                    <ul class="sublist">
                        <li class="hasItems">Bank
                            <ul class="sublist connected">
                                <li>subitem1-1</li>
                                <li>subitem1-2</li>
                                <li>subitem1-3</li>
                                <li>subitem1-4</li>
                            </ul>
                        
                        </li>
                        <li class="hasItems">AR
                            <ul class="sublist connected">
                                <li>subitem2-1</li>
                                <li>subitem2-2</li>
                                <li>subitem2-3</li>
                                <li>subitem2-4</li>
                            </ul>
                        </li>
                        <li class="hasItems">VZ
                            <ul class="sublist connected">
                                <li>subitem3-1</li>
                                <li>subitem3-2</li>
                                <li>subitem3-3</li>
                                <li>subitem3-4</li>
                            </ul>
                        </li>
                    </ul>
                
                </li>
                
                <li class="group">Liability
                    <ul class="sublist">
                        <li class="hasItems">Bank5
                            <ul class="sublist connected">
                                <li>subitem1-15</li>
                                <li>subitem1-25</li>
                                <li>subitem1-35</li>
                                <li>subitem1-45</li>
                            </ul>
                        
                        </li>
                        <li class="hasItems">AR5
                            <ul class="sublist">
                                <li>subitem2-15</li>
                                <li>subitem2-25</li>
                                <li>subitem2-35</li>
                                <li>subitem2-45</li>
                            </ul>
                        </li>
                        <li class="hasItems">VZ5
                            <ul class="sublist">
                                <li>subitem3-15</li>
                                <li>subitem3-25</li>
                                <li>subitem3-35</li>
                                <li>subitem3-45</li>
                            </ul>
                        </li>
                    </ul>
                
                </li>
                
            </ul>

Комментарии:

1. работает хорошо, но я не могу переместить подпункты в другую категорию-subcat: jsfiddle.net/Davos8549/uep6qdhc

2. Я неправильно понял это требование и обновил вопрос, теперь должен делать все, что вы ожидаете…

Метки: