Блог

Главная - Вопросы по программированию - Проверка, содержит ли каждый элемент box только один элемент

Проверка, содержит ли каждый элемент box только один элемент

#javascript #html #jquery #css

#javascript #HTML #jquery #css

Вопрос:

Я почти близок к тому, чего я пытаюсь достичь. Прямо сейчас приведенный ниже пример кода проверяет, есть ли в поле тег li. Пока это работает, но если в каком-либо из ящиков есть тег li, это просто блокирует функцию перетаскивания других ящиков. Но когда перетаскиваемый блок возвращается в свое предыдущее состояние, тогда другие блоки можно снова перетащить в блоки. Что я пытаюсь сделать, так это:

  1. Он должен иметь возможность проверять отдельные поля с помощью тега li

  2. Это не должно блокировать функцию для других блоков, если какой-либо из блоков имеет тег li. Скорее, он должен проверять отдельное поле, имеющее тег li

Я не уверен, смогу ли я заставить его работать без объявления нового идентификатора или класса для каждого тега li, скорее ожидая, что он будет работать как есть. Любым способом, чтобы я мог просмотреть тег li и использовать приведенное ниже условие:

 if ($('ul#sortable2 li').length > 1) { //This condition blocks drag and drop feature of other boxes if match found
    $(this).sortable("cancel");
}

Примечание: никакие два элемента не могут быть скорректированы в блоке одновременно для каждой секции блоков.

 $(function () {
$("#sortable1, #sortable2").sortable({
        connectWith: ".connectedSortable",
        stop: function (event, ui) {
            if ($('ul#sortable2 li').length > 1) { //Checks if a li tag exists
                $(this).sortable("cancel");
            }
        },

    }).disableSelection();
});  
 #sortable1, #sortable2 {
    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;
}

 #sortable1 li, #sortable2 li {
    margin: 0 15px 15px 15px;
    padding: 5px;
    font-size: 1.2em;
    width: 120px;
}

#sortable1 ul li {
    display: block;
    text-align: center;
    float: left;
}

#sortable2 ul li {
    display: block;
    text-align: center;
    float: left;
}  
 <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  
<!--First Part-->
<div class="col-md-5">
    <div class="col-md-12">
        <ul id="sortable1" class="connectedSortable">
            <li class="ui-state-default">Item 1</li>
        </ul>
    </div><br />
    <div class="col-md-12">
        <ul id="sortable1" class="connectedSortable">
            <li class="ui-state-default">Item 2</li>
        </ul>
    </div><br />
    <div class="col-md-12">
        <ul id="sortable1" class="connectedSortable">
            <li class="ui-state-default">Item 3</li>
        </ul>
    </div><br />
    <div class="col-md-12">
        <ul id="sortable1" class="connectedSortable">
            <li class="ui-state-default">Item 4</li>
        </ul>
    </div><br />
    <div class="col-md-12">
        <ul id="sortable1" class="connectedSortable">
            <li class="ui-state-default">Item 5</li>
        </ul>
    </div><br />
</div>

<!--Second Part-->
<div class="col-md-5">
    <div class="col-md-12">
        <ul id="sortable2" class="connectedSortable">
        </ul>
    </div>

    <div class="col-md-12">
        <ul id="sortable2" class="connectedSortable">
        </ul>
    </div>
    <div class="col-md-12">
        <ul id="sortable2" class="connectedSortable">
        </ul>
    </div>
    <div class="col-md-12">
        <ul id="sortable2" class="connectedSortable">
        </ul>
    </div>
    <div class="col-md-12">
        <ul id="sortable2" class="connectedSortable">
        </ul>
    </div>
</div>

Ответ №1:

У вас повторяющиеся идентификаторы. Это первая проблема, потому что идентификаторы должны быть уникальными. Я изменил идентификаторы с помощью класса.

Для того, чтобы ссылаться на текущее изменение вашего кода из:

 if ($('ul#sortable2 li').length > 1) { //Checks if a li tag exists

Для:

 if ($(ui.item).closest('ul').find('li').length > 1) { //Checks if a li tag exists

Рабочий фрагмент:

 $(".sortable1, .sortable2").sortable({
    connectWith: ".connectedSortable",
    stop: function (event, ui) {
        if ($(ui.item).closest('ul').find('li').length > 1) { //Checks if a li tag exists
            $(this).sortable("cancel");
        }
    }
}).disableSelection();  
 .sortable1, .sortable2 {
    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;
}

.sortable1 li, .sortable2 li {
    margin: 0 15px 15px 15px;
    padding: 5px;
    font-size: 1.2em;
    width: 120px;
}

.sortable1 ul li {
    display: block;
    text-align: center;
    float: left;
}

.sortable2 ul li {
    display: block;
    text-align: center;
    float: left;
}  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">


<!--First Part-->
<div class="col-md-5">
    <div class="col-md-12">
        <ul  class="sortable1 connectedSortable">
            <li class="ui-state-default">Item 1</li>
        </ul>
    </div><br />
    <div class="col-md-12">
        <ul  class="sortable1 connectedSortable">
            <li class="ui-state-default">Item 2</li>
        </ul>
    </div><br />
    <div class="col-md-12">
        <ul  class="sortable1 connectedSortable">
            <li class="ui-state-default">Item 3</li>
        </ul>
    </div><br />
    <div class="col-md-12">
        <ul class="sortable1 connectedSortable">
            <li class="ui-state-default">Item 4</li>
        </ul>
    </div><br />
    <div class="col-md-12">
        <ul  class="sortable1 connectedSortable">
            <li class="ui-state-default">Item 5</li>
        </ul>
    </div><br />
</div>

<!--Second Part-->
<div class="col-md-5">
    <div class="col-md-12">
        <ul  class="sortable2 connectedSortable">
        </ul>
    </div>

    <div class="col-md-12">
        <ul  class="sortable2 connectedSortable">
        </ul>
    </div>
    <div class="col-md-12">
        <ul  class="sortable2 connectedSortable">
        </ul>
    </div>
    <div class="col-md-12">
        <ul class="sortable2 connectedSortable">
        </ul>
    </div>
    <div class="col-md-12">
        <ul  class="sortable2 connectedSortable">
        </ul>
    </div>
</div>

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

1. Просто идеально @gaetanoM. Похоже, это работает, позвольте мне протестировать его в конце и сообщить вам — Большое спасибо.