jquery - 可能不允许 jQuery 可排序移动项目在同一列表中，但可以使用其他列表吗？

Question

我有两个连接的可排序列表:list_b 和 list_a。我想要实现的目标是仅在 list_b 中允许可见占位符。 list_a 仅用于拉出，因此我不希望在 list_a 中拖动时出现占位符(至少是占用空间的可见占位符)，但我想要 list_b 从 list_a 拖动占位符时显示占位符。

基本上:

• list_a 项到 list_b = 在 list_b
  
中显示占位符
• list_b 项到 list_b = 在 list_b
  
中显示占位符
• list_a 项到 list_a = 不显示占位符，或使用样式为 display:none 的占位符；在 list_a
  
• list_b 项到 list_a = 不显示占位符，或使用样式为 display:none 的占位符；在 list_a
  

jQuery:

$( "#list_a, #list_b" ).sortable({
connectWith: ".connected_sortable",
start: function (e, ui) {
  //Closest I can get but now both lists don't show placeholders.
  if(ui.item.context.parentNode.id != 'destination_list')
    ui.placeholder.hide();
},
}).disableSelection();

HTML:

<ul id="list_a" class="connected_sortable">
  <li value="0">test text</li>
  <li value="1">test text</li>
</ul>

<ul id="list_b" class="connected_sortable">
  <li value="2">test text</li>
</ul>

除了将 jQuery 可拖动插件与可排序插件结合之外，还有其他方法可以做到这一点吗？我不想走这条路，因为我在同时使用这两个插件时遇到了一些 jQuery 错误。

Answer 1

js Fiddle example for my answer

您可以使list_a 连接到list_b，但不能将list_b 连接到list_a。这样就不可能将 list_b 项目拖到 list_a 中。示例:

$( "#list_a" ).sortable({
    connectWith: "#list_b"
});
$( "#list_b" ).sortable({
    placeholder: "placeholder"
});

$( "#list_a, #list_b" ).disableSelection();

但是如果你只是想隐藏占位符，那么你可以使用 css 来做到这一点:

#list_a .placeholder {display:none}