after resetting, jquery lists using connectWith stops working

Question

I'm trying to use jquery sortable lists using connectWith to accomplish the following:

1. Connect three lists and drag items between them
2. Reset the lists so they get back to the original state and
3. Drag between the lists again

I'm able to achieve steps 1 and 2 with this code, http://jsfiddle.net/n5q54a4s/1/, but not step 3. Once the reset happens I'm unable to drag any more between the lists.

The reset is done with code like:

$(document).ready(function() {
     var sort1 = $("#sortable1").clone();
     var sort2 = $("#sortable2").clone();
     var sort3 = $("#sortable3").clone();

     $("#resetList").click(function(){
        $("#sortable1").replaceWith(sort1);
        $("#sortable2").replaceWith(sort2);
        $("#sortable3").replaceWith(sort3);
    });
});

What might I be doing wrong that prevents the dragging between lists after the reset? Again the entire code is at: http://jsfiddle.net/n5q54a4s/1/

Answer 1

You dont want to clone the entire sortable. You want the code inside the sortable to reset

Rather than using clone(), use html().

var sort1 = $("#sortable1").html();
var sort2 = $("#sortable2").html();
var sort3 = $("#sortable3").html();

$("#resetList").click(function(){
    $("#sortable1").html(sort1);
    $("#sortable2").html(sort2);
    $("#sortable3").html(sort3);
});

So here is the demo http://jsfiddle.net/n5q54a4s/2/