jQuery：保存位于两个可排序div中的div的位置

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

我想在可排序的left-div / right-div中保存div框的位置。 PS:我使用jquery-cookie插件。

With position, I mean:

有位置,我的意思是:

Whether the item (like #module_weather or #module_news) is in the left or right div

项目(如#module_weather或#module_news)是在左侧还是右侧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

项目(如#module_weather或#module_news)的顺序是,例如在左边的div中:首先是#module_weather,然后是#module_news

jQuery：保存位于两个可排序div中的div的位置 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?

如何在cookie中保存位置?如何读取cookie以使项目以正确的div和正确的顺序列出?

1 个解决方案

#1

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

下面的内容怎么样?每个元素和容器都需要唯一的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);
    }        
}

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/

修复了上面代码的错误。将$(容器).eq(...)更改为$(容器).children()。eq(..)这是您更新的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"));
        });
    }
});

#1