Sandeep Kushwah Sandeep Kushwah - 5 months ago 15
jQuery Question

Copy Item from One static list to another and revert as well

I have two lists.

ListOne
and
ListTwo
. There are 1-5 items in
ListTwo
and want to Drag the desired item to
ListOne
, which will be blank initially, that item will be added to
ListOne
but that Item will not be removed from
ListTwo
. I have completed till here.

Problem : When I want to drag the Item from
ListOne
to
ListTwo
this item should be removed from
ListOne
but should not be added to
ListTwo
. This is not happening.

In simple words I want ListTwo to be static.

Here is my fiddle link.http://jsfiddle.net/hQnWG/1596/

Answer

Here is a solution. I connected sortable1 to sortable2 and used a receive handler on sortable2 to remove the item when it's moved over.

$(function() {
    $("#sortable2").sortable({
        connectWith: "#sortable1",

        helper: function (e, li) {
            this.copyHelper = li.clone().insertAfter(li);

            $(this).data('copied', false);

            return li.clone();
        },
        stop: function () {

            var copied = $(this).data('copied');

            if (!copied) {
                this.copyHelper.remove();
            }

            this.copyHelper = null;
        },

        receive: function(e, ui){
            $(ui.item[0]).remove();
        }
    });

    $("#sortable1").sortable({
        connectWith: "#sortable2",
        receive: function (e, ui) {
            ui.sender.data('copied', true);
        }
    });

    $("#sortable1").on("click", "li", function () {


    });   
});

http://jsfiddle.net/jufcd4y8/

Comments