jquery-ui drag and drop - how to dropped items?

Question

Hi,

I'm trying to use jquery-ui. I am using one of the drag and drop examples which is pretty much exactly what I need, except instead of moving items between the two lists, I'd like the items to be cloned:

http://jqueryui.com/demos/sortable/#connect-lists

$(function() {
    $("#sortable1, #sortable2").sortable({
        connectWith: '.connectedSortable'
    }).disableSelection();
});

<ul id="sortable1" class="connectedSortable">
  <li class="ui-state-default">Item 1</li>
  <li class="ui-state-default">Item 2</li>
  <li class="ui-state-default">Item 3</li>
</ul>

<ul id="sortable2" class="connectedSortable">
  <li class="ui-state-default">Item 1</li>
  <li class="ui-state-default">Item 2</li>
  <li class="ui-state-default">Item 3</li>
</ul>

so moving an item from the first list to the second list results in list 1 have 2 items, and list 2 having 4 items. I just want it to make clones of the items on the drop. So in the above example, list 1 would still have 3 items, but list 2 would have 4 items,

Thank you

Answer 1

This isn't your perfect answer, but i needed something similar... adding a remove() handler to the sortable will allow you to clone the element that's about to be removed. Try this:

$(function() {
    $("#sortable1, #sortable2").sortable({
        connectWith: '.connectedSortable',
        remove: function(event,ui){
       ui.item.clone().appendTo('#sortable1');
    }
    }).disableSelection();
});

if you drag an item from sortable1 to sortable2, it will be added to the bottom of sortable1 when you drop it. it would make most sense to clone the item when dragging starts, then delete the clone if the drag is unsuccessful. but I couldn't find the event that fires when you begin a drag.