Duplicate an item from one list to another using jquery sort

Question

I have a regular sortable list and a "toolbar" from where I want to get the items in the list. For example:

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

I want to make it so that when you drag one of the toolbar items, it creates its own copy, which can be attached to the list. In addition, I do not want the user to reorder the toolbar items.

I use this, but it does not do all that I need:

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

Answer 1

jQuery UI draggable + sortable is what you are looking for.

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