Не разрешайте сортировку в сортируемом списке, используйте только connectWith, чтобы переместить их в другой сортируемый список.

Question 1

Я использую функцию jQuery UI .sortable. У меня есть список а и список б. Я хочу, чтобы пользователь мог:

Перетащите элементы из списка а в список б, но не из списка б в список а
Сортировать элементы в списке б, но нет в списке а

Мой код соответствует только первому требованию. Я не могу остановить сортировку элементов в списке a.

Хотя код в ответе https://stackoverflow.com/a/14442218/5798798 автоматически отменяет любую сортировку, выполненную в list, это не мешает сортировке внутри него (это то, что я ищу).

$("#sortable").sortable({
  connectWith: "#sortable2"
});

$("#sortable2").sortable({});

<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>
<p>List A</p>
<div id="sortable">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</div>
<p>List B</p>
<div id="sortable2">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</div>

JsFiddle: http://jsfiddle.net/g5nxjk0e/1/

Обратите внимание, что может быть несколько списков, в которые можно перетащить список

javascript jquery html jquery-ui jquery-ui-sortable

0

The Codesee 21 Мар 2020 в 15:40

Не используйте Sortable в списке A. Используйте Draggable в списке A. jqueryui.com/draggable/#sortable

–

Twisty

21 Мар 2020 в 19:08

Answer

Просмотрите: https://jqueryui.com/draggable/#sortable.

Примере:

$(function() {
  $(".drag > li").draggable({
    connectToSortable: ".sort",
    revert: "invalid"
  });
  $(".sort").sortable();
});

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  margin-bottom: 10px;
}

li {
  margin: 5px;
  padding: 5px;
  width: 150px;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<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>
<p>List A</p>
<ul id="drag-1" class="drag">
  <li>Item A</li>
  <li>Item B</li>
  <li>Item C</li>
</ul>
<p>List B</p>
<ul id="sort-1" class="sort">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>
<p>List c</p>
<ul id="sort-2" class="sort">
  <li>Apple</li>
  <li>Blueberry</li>
  <li>Cherry</li>
</ul>

2

Twisty 21 Мар 2020 в 19:22

Спасибо за это. Как бы это работало, если бы у меня было несколько сортируемых списков, в которые я мог бы перетаскивать список А?

–

The Codesee

21 Мар 2020 в 19:19

Вам нужно будет использовать правильный селектор: api.jqueryui.com/draggable/#option-connectToSortable Рассмотрите возможность использования селектора класса, который применяется ко многим элементам сортировки, или перечислите все идентификаторы. Смотрите обновление.

–

Twisty

21 Мар 2020 в 19:20

Question 2

Просмотрите: https://jqueryui.com/draggable/#sortable.

Примере:

$(function() {
  $(".drag > li").draggable({
    connectToSortable: ".sort",
    revert: "invalid"
  });
  $(".sort").sortable();
});

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  margin-bottom: 10px;
}

li {
  margin: 5px;
  padding: 5px;
  width: 150px;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<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>
<p>List A</p>
<ul id="drag-1" class="drag">
  <li>Item A</li>
  <li>Item B</li>
  <li>Item C</li>
</ul>
<p>List B</p>
<ul id="sort-1" class="sort">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>
<p>List c</p>
<ul id="sort-2" class="sort">
  <li>Apple</li>
  <li>Blueberry</li>
  <li>Cherry</li>
</ul>

2

Twisty 21 Мар 2020 в 19:22

Спасибо за это. Как бы это работало, если бы у меня было несколько сортируемых списков, в которые я мог бы перетаскивать список А?

–

The Codesee

21 Мар 2020 в 19:19

Вам нужно будет использовать правильный селектор: api.jqueryui.com/draggable/#option-connectToSortable Рассмотрите возможность использования селектора класса, который применяется ко многим элементам сортировки, или перечислите все идентификаторы. Смотрите обновление.

–

Twisty

21 Мар 2020 в 19:20

Не разрешайте сортировку в сортируемом списке, используйте только connectWith, чтобы переместить их в другой сортируемый список.

1 ответ

Похожие вопросы

Связанные вопросы

Новые вопросы

javascript