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

  1. В первой части я хотел бы заблокировать функцию сортировки или перетаскивания между полями. Прямо сейчас любой может поставить любое «нет». элементов в коробках первой части (в частности, для коробок первой части и между ними), а коробка может включать все элементы. Одна коробка будет содержать только один элемент за раз. Но в этом случае элементы из одного ящика первой части можно будет перетаскивать только в ящики второй части.

  2. Таким же образом, если элемент первой части перетаскивается в поля второй части, а поле второй части уже содержит элемент, то он должен вернуться или вернуться к предыдущему ящику первой части.

Я могу проверить, доступен ли какой-либо элемент в полях, но я не уверен, как я могу вернуть поля, если поля не пустые или похожие? Кто-нибудь делал это раньше или есть идея реализовать это.

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

N.B : созданы два раздела div с первым и вторым, чтобы вы могли понять, как я выполняю задачу, и облегчить понимание.

$(function () {
 $("#sortable1, #sortable2").sortable({
            connectWith: ".connectedSortable"
        }).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">
            <li></li>
        </ul>
    </div>

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

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

$(function () {
$("#sortable1, #sortable2").sortable({
        connectWith: ".connectedSortable",
        /* added */
        stop: function (event, ui) {
            if ($('ul#sortable2 li').length > 1) { //Condition changed here
                $(this).sortable("cancel");
            }
        },

    }).disableSelection();
});
2
user8512043 8 Сен 2020 в 13:04

1 ответ

Лучший ответ

Вы можете определить функцию, которая вызывается при срабатывании события остановки, используя свойство stop. Затем, когда сортировка остановится, вы можете выполнить проверку и использовать параметр отменить в sortable, чтобы отменить сортировку.

Ниже приведен пример использования вашего кода. См. Раздел /* added */.

Кроме того, значения id должны быть уникальными в документе HTML. Я изменил sortable1 и sortable2 на классы в вашей разметке.

$(function() {
  // sortable1 and sortable2 are now classes
  $(".sortable1, .sortable2").sortable({
    connectWith: ".connectedSortable",
    /* added */
    stop: function(event, ui) {
      if (ui.item.prev().closest('ul li').html()) { // replace with any other desired condition(s)
        $(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 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">
      <li></li>
    </ul>
  </div>

  <div class="col-md-12">
    <ul class="sortable2 connectedSortable">
      <li></li>
    </ul>
  </div>
  <div class="col-md-12">
    <ul class="sortable2 connectedSortable">
      <li></li>
    </ul>
  </div>
  <div class="col-md-12">
    <ul class="sortable2 connectedSortable">
      <li></li>
    </ul>
  </div>
  <div class="col-md-12">
    <ul class="sortable2 connectedSortable">
      <li></li>
    </ul>
  </div>
</div>
1
JoshG 9 Сен 2020 в 11:37