jQuery UI / 如何让一个sortable接收但不发送物品？

Question

我有几个 jQuery UI 可排序列表，想将这些项目从一个列表移到另一个列表。除了一个阻止列表：这应该能够从其他列表中接收项目，但此列表中的项目甚至不应该对移动尝试做出反应。这可能吗？如何？我尝试在开始事件中使用 .sortable("cancel") 但这似乎不起作用...

请看这里，第二个列表应该是 "blocked" 一个：http://jsfiddle.net/r1rffht7/

 $(function() {
   $( ".sortable_list" ).sortable({
     connectWith: ".connectedSortable",             
   }).disableSelection();
 });

Answer 1

您可以像这样使用 cancel 选择器来更新您的 JQuery-UI sortable 函数（或查看此 Updated Fiddle:

注意： 确保在 blocked_list div.

中包含您的 sortable_list class

$(function() {
  $(".sortable_list").sortable({
    connectWith: ".connectedSortable",
    cancel: ".blockedList"
  }).disableSelection();
});

.blockedList {
  border: 1px solid #f00 !important;
}

.sortable_list,
.blockedList {
  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,
.sortable_list .li,
.blockedList li {
  margin: 0 5px 5px 5px;
  padding: 5px;
  font-size: 1.2em;
  width: 120px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet" />

<h3>Conected lists : You can move items between any list</h3>
<ul id="sortable1" class="sortable_list connectedSortable">
  <li class="ui-state-default">List 1 - Item 1</li>
  <li class="ui-state-default">List 1 - Item 2</li>
  <li class="ui-state-default">List 1 - Item 3</li>
  <li class="ui-state-default">List 1 - Item 4</li>
  <li class="ui-state-default">List 1 - Item 5</li>
</ul>

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

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

jQuery UI / 如何让一个sortable接收但不发送物品？

jQuery UI / How to allow a sortable to receive but no to send items?

jquery-ui

jquery-ui-sortable