Дублирование элемента из одного списка в другой с помощью сортируемого jquery

Question

У меня есть обычный сортируемый список и набор инструментов, из которого я хочу получить элементы в списке. Так, например:

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

Я хочу сделать так, чтобы при перетаскивании одного из элементов панели инструментов он сам создавал копию, которую можно прикрепить к списку. Кроме того, я не хочу, чтобы пользователь переупорядочивал элементы панели инструментов.

Я использую это, но оно не делает все, что мне нужно:

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

Answer 1

jQuery UI, перетаскиваемый + сортируемый - это то, что вы ищете.

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