Jquery-ui sortable cancel

Question

so i have a problem that im trying to solve, for which i have not found an answer online (yet)...so i thought i would try asking to see if anyone can provide any sort of insight while i continue searching...i have 2 sortable lists as follows:

list 1

• List 1 item 1 < delete icon >
• List 1 item 2 < delete icon >
• List 1 item 3 < delete icon >

list 2

• List 2 item 1
• List 2 item 2
• List 2 item 3

details: list 2 is connected to list 1 using the 'connectWith:' option, meaning i am only allowing items from list 2 to be dragged into list 1 but not vice versa. as i illustrated in the setup above, list 1 items have a delete icon which will allow me to remove any items that were added to list 1. when items from list 2 get dragged into list 1, i append this delete icon which will give me the ability to remove the dragged item as well.

problem: now here comes the problem, if i hit the delete icon on list 1 on a item that originally came from list 2, then i would like to restore that item back in list 2. i have tried using the 'cancel' option, but that only restores the last dragged/dropped item.

scenario: list 1

• List 1 item 1 < delete icon >
• List 1 item 2 < delete icon >
• List 1 item 3 < delete icon >
• List 2 item 1 < delete icon >
• List 2 item 2 < delete icon >

if i click delete icon on List 2 item 1, i only want List 2 item 1 to be restored back into list 2, and keep List 2 item 2 as is in list 1...

any suggestions will be appreciated HTML:

<ul id="cur-dist-list">
<li class="ui-state-default">List 1 Item 1 <a href="#" class="ui-icon ui-icon-trash" style="display:inline-block;"></a></li>
<li class="ui-state-default">List 1 Item 2 <a href="#" class="ui-icon ui-icon-trash" style="display:inline-block;"></a></li>
<li class="ui-state-default">List 1 Item 3 <a href="#" class="ui-icon ui-icon-trash" style="display:inline-block;"></a></li>
<li class="ui-state-default">List 1 Item 4 <a href="#" class="ui-icon ui-icon-trash" style="display:inline-block;"></a></li>
<li class="ui-state-default">List 1 Item 5 <a href="#" class="ui-icon ui-icon-trash" style="display:inline-block;"></a></li>
</ul><br /><br />
<ul id="prev-dist-list">
<li class="ui-state-default">List 2 Item 1</li>
<li class="ui-state-default">List 2 Item 2</li>
<li class="ui-state-default">List 2 Item 3</li>
<li class="ui-state-default">List 2 Item 4</li>
<li class="ui-state-default">List 2 Item 5</li>
</ul><br /><br />
<button id="doc-dist-submit-button" style="cursor:pointer;">Submit</button>

Javascript:

$("#doc-dist-submit-button").button();
    $("#cur-dist-list").sortable({
        dropOnEmpty: true,
        receive: function(event, ui) {
            var dropElemTxt = $(ui.item).text();

$(ui.item).replaceWith('<li class="ui-state-default prev-prov">' + dropElemTxt + 
'<a href="#" id="remove-prov-' + ($("#cur-dist-list li").size()) + '" class="ui-icon ui-icon-trash" style="display:inline-block;"></a></li>');
        },
        placeholder: {
            element: function(currentItem, ui) {
                return $('<li class="selected">' + currentItem[0].innerHTML + '</li>');
            },
            update: function(container, p) {
                return;
            }
        }
    }).disableSelection();

    $("#cur-dist-list").on("click", "a", function(){

        $(this).parent("li").remove();

        if($(this).parent("li").hasClass("prev-prov")){
            $("#prev-dist-list").sortable('cancel');
        }
    });

    $("#prev-dist-list").sortable({
        connectWith: "#cur-dist-list",
        placeholder: {
            element: function(currentItem, ui) {
                return $('<li class="selected">' + currentItem[0].innerHTML + '</li>');
            },
            update: function(container, p) {
                return;
            }
        }
    }).disableSelection();

Answer 1

for now this is what im doing:

$("#prev-dist-list").append('<li class="ui-state-default">' + $(this).parent("li").text() + '</li>');

on the click event of the icon, this seems to work fine, now i just need to work with ordering the item in the right place

Answer 2

It looks like you already answered your own question. When deleting from the first list, you could detach the list item and appendTo() back to the second list(minus the delete button).

http://jsfiddle.net/Rusln/pCUJZ/

$("#workspace").sortable({
    receive:function(ev,ui){
        ui.item.append(" <button class='remove'>X</button>");
    }
});
$("#toolbox").sortable({
    connectWith:"#workspace"
});
$("#workspace").on("click",".remove",function(e){

    $(this).parent().detach().appendTo("#toolbox");
    $(this).remove();
});