使用jquery sortable将项目从一个列表复制到另一个列表

时间:2010-11-12 17:23:02

标签: jquery jquery-ui-sortable

我有一个正常的可排序列表,以及一个“工具箱”,我想从中获取元素到列表中。例如:

<ul id="list"></ul>
<ul id="toolbox">
  <li>item 1</li>
  <li>item 2</li>
</ul>

我想这样做,当你拖动其中一个工具箱的元素时,它会创建一个可以附加到列表的自身副本。另外,我不希望用户重新排序工具箱的元素。

我正在使用它,但它没有做我需要的一切:

$('#toolbox').sortable({
  'connectWith': '#list',
});

1 个答案:

答案 0 :(得分:8)

jQuery UI draggable+sortable正是您所寻找的。

$( "#list" ).sortable({
    revert: true
});
$( "#toolbox li" ).draggable({
    connectToSortable: "#list",
    helper: "clone",
    revert: "invalid"
});
$( "ul, li" ).disableSelection();