Question

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

有位置，我的意思是：

该项目（如#module_weather或#module_news）是在左侧还是右侧
项目（例如#module_weather或#module_news）的顺序，例如左侧div：首先是#module_weather，然后是#module_news

enter image description here 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>

如何在Cookie中保存位置？如何阅读Cookie以便项目以正确的div和正确的顺序列出？

Answer 1

如下所示。每个元素和容器都需要唯一的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(){
    savePosition($(this).attr("id"));
});

加载：

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

更新2

修正了上述代码的错误。将$(container).eq(...)更改为$(container).children().eq(..)这是您更新的jsfiddle：https://jsfiddle.net/be0Lmu4j/4/

另外，根据您的评论，这里是可排序方法的更新事件：

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

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

1 个答案: