Jquery Sortable Save Order

by wind_chime18

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>
<div class="content">
    <div class="content_left">
        <div id="left" class="padding_10px left">
            <div id="module_weather" class="panelgroup">
                <div class="panelheadbar">Weather</div>
                <div id="pc_weather" class="panelcontent">
                    text here...
                </div>
            </div>
            <div id="module_news" class="panelgroup">
                <div class="panelheadbar">News</div>
                <div id="pc_news" class="panelcontent">
                    text here...
                </div>
            </div>
        </div>
    </div>
    <div class="content_mid">
        <div class="padding_10px">
            not interesting here...
        </div>
    </div>
    <div class="content_right">
        <div id="right" class="padding_10px right">
            <div id="module_changelogs" class="panelgroup">
                <div class="panelheadbar">Changelogs</div>
                <div id="pc_changelogs" class="panelcontent">
                    text here...
                </div>
            </div>
            <div id="module_dontknow" class="panelgroup">
                <div class="panelheadbar">Dontknow</div>
                <div id="pc_dontknow" class="panelcontent">
                    text here...
                </div>
            </div>
        </div>
    </div>
</div>

CSS

.content_left {	
    float: left; 
    width: 22.5%; 
    top: 0; 
    bottom: 0; 
    position: absolute;
}
.content_mid {
    float: left; 
    left: 22.5%; 
    width: 55%; 
    top: 0; 
    bottom: 0; 
    position: absolute; 
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc; 
    box-sizing:border-box; 
    -moz-box-sizing:border-box; 
    -webkit-box-sizing:border-box;
}
.content_right { 
    float: left;
    left: 77.5%; 
    width: 22.5%; 
    top: 0; 
    bottom: 0; 
    position: absolute;
}
.padding_10px {
    padding: 10px;
}
.panelheadbar {	
    padding: 5px; 
    overflow: hidden; 
    height: auto; 
    cursor: move;
    background-color: blue;
}
.panelcontent {	
    overflow: auto; 
    overflow-x: hidden;
    padding: 10px; 
    top: 0px; 
    left: 0px;
	background-color: #FFF; 
    border-left: 1px solid blue; 
    border-right: 1px solid blue; 
	border-bottom: 1px solid blue;
}
.panelgroup {
    margin-bottom: 10px;
}
}

JavaScript

$( ".padding_10px" ).sortable({
	handle: ".panelheadbar",
	helper: "clone",
	appendTo: ".content",
	connectWith: ".left, .right",
    update:function(){
        $("#left,#right").children().each(function(){
            savePosition($(this).attr("id"));
        });
    }
});
function savePosition(id){
    var el = $("#" + id);
    var container = el.parent().attr("id");
    var index = el.index();
    $.cookie(id,JSON.stringify({ container:container, index:index }));
}
function loadPosition(id){
    
    
    var el = $("#" + id);
    var position = JSON.parse($.cookie(id));
    var container = "#" + position.container;
    var index = position.index;
    if(index == 0){
        $(container).prepend(el);
    }else if($(container).children().eq(index - 1).length == 0){
        $(container).append(el);
    }else{
        $(container).children().eq(index - 1).after(el);
    }     
    
}
$("#left,#right").children().each(function(){
    loadPosition($(this).attr("id"));
});