SO - 19803254

by nsjithin

HTML

<div class="boxes columns connect1" id="column1">
    <span>Column1</span>
</div>
<div class="boxes columns connect1" id="column2">
    <span>Column2</span>
</div>
<div class="boxes columns connect1" id="column3">
    <span>Column3</span>
</div>
<div class="boxes columns connect1" id="column4">
    <span>Column4</span>
</div>
<div class="boxes connect1" id="mainlinks">
    <span>Main links</span>
    <div class="main_item connect2" id="main_item1">main_item1</div>
    <div class="main_item connect2" id="main_item2">main_item2</div>
    <div class="main_item connect2" id="main_item3">main_item3</div>
    <div class="main_item connect2" id="main_item4">main_item4</div>
    <div class="main_item connect2" id="main_item5">main_item5</div>
    

</div>
<div class="boxes connect2" id="sublinks">
    <span>Sub links</span>
    <div class="sub_item" id="sub_item1">1</div>
    <div class="sub_item" id="sub_item2">2</div>
    <div class="sub_item" id="sub_item3">3</div>
    <div class="sub_item" id="sub_item4">4</div>
    <div class="sub_item" id="sub_item5">5</div>
    <div class="sub_item" id="sub_item6">6</div>
    <div class="sub_item" id="sub_item7">7</div>
    <div class="sub_item" id="sub_item8">8</div>
    <div class="sub_item" id="sub_item9">9</div>
    <div class="sub_item" id="sub_item10">10</div>
</div>

<button>Get JSON</button>
<textarea style="width:250px;height:250px;"></textarea>

CSS

div{
    position:relative;
    float:left;
}
.boxes{
    margin: 10px;
    width : 200px;
    height : 300px;
}
.columns {
    border : solid 1px black;
}
#mainlinks{
    border : solid 1px blue;
    width : 300px;
    height : 300px;
}
#sublinks{
    border : solid 1px green;
    width : 300px;
    height : 300px;
}
.main_item{
    width : 200px;
    height : 100px;
    border : solid 1px red;
    margin: 5px;
}
.sub_item{
    width : 30px;
    height : 30px;
    border : solid 1px orange;
    margin: 5px;
}

JavaScript

$(document).ready(function () {
    $('.columns, #mainlinks').sortable({
        connectWith: '.connect1',
    });

    $('.main_item, #sublinks').sortable({
        connectWith: '.connect2',
    });
    
    $('button').click(function(){
        var result = {};
        $('.columns > .main_item > .sub_item').each(function(){
            var parent = $(this).parent().attr('id');
            var grand_parent = $(this).parent().parent().attr('id');
            if(!result[grand_parent]){
                result[grand_parent] = {};
            }
            if(!result[grand_parent][parent]){
                result[grand_parent][parent] = [];
            }
            result[grand_parent][parent].push($(this).attr('id'));
        })
        
        
        $('textarea').text(JSON.stringify({ 
            data:result
        }));
    })
    
});