Sortable Divs anidadas

Divs anidados con Jquery

by EDWIN MAURICIO QUISHPE MALDONADO

HTML

<div class="containers">Container 1
        <div class="rows">
            <div>Row 1</div>
            <div>Row 2</div>
            <div class="nada">Row 3 -> contenedor</div>
        </div>
      
        <div class="rows">
            <div>Row 4</div>
            <div>Row 5</div>
        </div>
</div>

CSS

body {
    background-color: #f4f4f4;
}
div {
    margin: 0;
    padding: 0;
    list-style: none;
}
div.containers div {
    padding: 20px;
    margin: 0;
    border: 3px solid red;
    background-color: #fff;
}
div.rows div {
    padding: 20px;
    margin: 0;
    border: 3px solid blue;
    background-color: #fff;
}
div div {
    margin-bottom: 15px !important;
    cursor: move;
}
div div:last-child {
    margin-bottom: 0;
}
.div-state-highlight {
    border: 2px dotted steelblue !important;
}
div.containers{
    border: 2px solid olive;
    padding: 5px;
}

JavaScript

$(document).ready(function () {
    $(".containers").sortable({
        axis: 'y',
        //connectWith:'.rows',
        placeholder: "div-state-highlight",
        forcePlaceholderSize: true,
        receive: function(event, ui){
            if(ui.item.hasClass('nada')){                   
                console.log("tiene la clase");
                ui.item.removeClass("nada");
                ui.item.addClass("rows");
                ui.item.sortable({connectWith:'.rows, .containers',});
                /*ui.item.draggable({
        connectToSortable: ".rows",
    });*/
            }else{
                console.log("no tiene");
            }
            
        }
    });
    $("div.containers").disableSelection();

    $(".rows").sortable({
        axis: 'y',
        connectWith:'.rows, .containers',
        placeholder: "div-state-highlight",
        forcePlaceholderSize: true,
        over: function(event, ui){
            //console.log(ui.item);
        },
        receive:function(e, ui){
            if(ui.item.hasClass('ui-draggable')){
                ui.item.removeClass('ui-draggable');
            }
            if(ui.item.hasClass('ui-draggable-dragging')){
                ui.item.removeClass('ui-draggable-dragging');
            }
        }
    });
    $("div.rows").disableSelection();
});