Sortable Clone Check

by Digvijay Naruka

HTML

<div id="wrapper">
    <div class="swrapper"> 
        <a class="btnclone">Klick here to clone this list set</a>
        <ul class="sconnect">
            <li class="ui-state-default sortable-element">1.1</li>
            <li class="ui-state-default sortable-element">1.2</li>
            <li class="ui-state-default sortable-element">1.3</li>
        </ul>   
    </div>
    <div class="swrapper">
        <a class="btnclone">Klick here to clone this list set</a>
        <ul class="sconnect">
            <li class="ui-state-default sortable-element">2.1</li>
            <li class="ui-state-default sortable-element">2.2</li>
            <li class="ui-state-default sortable-element">2.3</li>
        </ul>
    </div>
</div>

CSS

.sortable-element {
    background-color:grey;
    border:1px solid black;
    width:45px;
    padding:10px;
}
.swrapper {
    background-color:darkgrey;
    margin-bottom:10px;
}
.cloneme {
    visibility:hidden;
}
.btnclone{float:right;cursor:pointer;margin:10px;padding:5px;background-color:black;color:white;font-weight:bold;border:3px solid white;}

JavaScript

$(function() {

    $(".swrapper > ul").sortable({
        connectWith: ".sconnect"
    }).disableSelection();

    $("#wrapper").sortable({
        connectWith: ".swrapper"
    }).disableSelection();

    $('a.btnclone').on('click', function (event) {        
      
        var cloneHdl = $(this).closest('.swrapper').clone();
        
        cloneHdl.find("> ul").sortable({
            connectWith: ".sconnect"
        }).disableSelection();  
        
        cloneHdl.find('.btnclone').html('This is a clone. Klick to clone again....');
        cloneHdl.find('.btnclone').css("border", "3px solid red");
        cloneHdl.css("border", "3px solid red");
        cloneHdl.appendTo('#wrapper');        
           
       
    });
    
});