我有两个列表 - A 和 B
我希望列表 B 能够在其内部进行排序。 这有效。
我希望列表 A 具有可以拖动到列表 B 的 LI 元素。这有效。
我希望列表 A 也可以在其内部排序。 这不起作用。
它不起作用，因为 .draggable 位于列表 A 上。如果我删除它，它是可排序的 - 但不是不可拖动到列表 B。
如何让列表 A LI 元素既可以在自己的列表中排序，又可以拖动到另一个(可排序)列表？
在我的例子中，列表 A 是 ID#list_to_process，列表 B 是#categories。我认为这个问题本身是相当普遍的，也是其他人可能会面临的问题。
jsfiddle:http://jsfiddle.net/RNHxY/
<html>
<head>
<style>
#categorizer { padding: 2px; }
#list_to_process, #categories { color: blue; background-color: green; border: solid; border-width: 4px }
ul { padding: 10px; margin: 50px; float:left; list-style:none; }
li { color: yellow; padding: 25px 80px; cursor: move; }
li:nth-child(even) { background-color: #000 }
li:nth-child(odd) { background-color: #666 }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready( function() {
$("#categories").sortable({
revert: true,
receive: function(evt, ui) {
ui.item.remove(); # Remove the item in the 'from' list.
# Next 3 lines just there to remove empty UL when no LI's left.
if ( $('#list_to_process li').length == 0) {
$('#list_to_process').remove();
}
}
});
$("#list_to_process").sortable({
revert: true # This isn't working.
});
# Below is over-writing the sortable capability of #list_to_process
$("li.to_process").draggable( {
connectToSortable: "#categories",
helper: "clone",
revert: "invalid"
});
});
</script>
</head>
<body>
<div id="categorizer">
<ul id="list_to_process">
<li class="to_process" id="left1">1</li>
<li class="to_process" id="left2">2</li>
<li class="to_process" id="left3">3</li>
<li class="to_process" id="left4">4</li>
<li class="to_process" id="left5">5</li>
</ul>
<ul id="categories">
<li id="righta">a</li>
<li id="rightb">b</li>
<li id="rightc">c</li>
<li id="rightd">d</li>
<li id="righte">e</li>
</ul>
</div>
</body>
</html>
最佳答案
您可以使用 connectWith 选项来解决该问题:
A selector of other sortable elements that the items from this list should be connected to. This is a one-way relationship, if you want the items to be connected in both directions, the connectWith option must be set on both sortable elements.
这使您可以链接两个列表并在第一个列表本身、第一个列表和第二个列表之间对元素进行排序。
对于第二个列表，sortable 功能就足够了。
引用:http://api.jqueryui.com/sortable/#option-connectWith
相关脚本如下:
$("#list_to_process").sortable({
connectWith: "#categories",
revert: true
});
$("#categories").sortable({
revert: true,
receive: function (evt, ui) {
if ($('#list_to_process li').length === 0) {
$('#list_to_process').remove();
}
}
});
这是一个工作 fiddle :http://jsfiddle.net/IrvinDominin/JTHsU/2/
关于jquery - 如何让列表元素可排序并且可拖动到另一个列表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15999696/