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 draggable插件与可排序插件结合使用之外，有没有办法做到这一点？我不想走这条路，因为我在使用两个插件时遇到了一些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}

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

1 个答案: