jQuery: save position of divs which are inside two sortable divs

Question

I want to save the position of the div-boxes inside the sortable left-div/right-div. PS: I use the jquery-cookie plugin.

With position, I mean:

• Whether the item (like #module_weather or #module_news ) is in the left or right div
• In which order the items (like #module_weather or #module_news ) are, for example in the left div: at first #module_weather and then #module_news

Javascript (jQuery)

$( ".padding_10px" ).sortable({
    handle: ".panelheadbar",
    helper: "clone",
    appendTo: ".content",
    connectWith: ".left, .right"
});

HTML

<div class="content">
    <div class="content_left">
        <div 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">
        not interesting here...
    </div>
    <div class="content_right">
        <div 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>

How can I save the position in a cookie and how can I read the cookie so that the items are listed in the right div and the right order?

Answer 1

What about something like below. Each element and the containers need unique ids.

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);
    }        
}

UPDATE

To address your comment, you probably need to iterate over each element every time you need to save/load.

To save:

$("#left,#right").children().each(function(){
    savePosition($(this).attr("id"));
});

To load:

$("#left,#right").children().each(function(){
    loadPosition($(this).attr("id"));
});

UPDATE 2

Fixed a bug with the code above. Changed $(container).eq(...) to $(container).children().eq(..) Here's your updated jsfiddle: https://jsfiddle.net/be0Lmu4j/4/

Also, as per your comments, here's an update event for the sortable method:

$( ".padding_10px" ).sortable({
    handle: ".panelheadbar",
    helper: "clone",
    appendTo: ".content",
    connectWith: ".left, .right",
    update:function(){
        $("#left,#right").children().each(function(){
            savePosition($(this).attr("id"));
        });
    }
});