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

Question

我想保存div-boxes在可排序左/ div /右div内的位置。 PS：我使用jquery-cookie插件。

带位置，我的意思是：

• 无论项目（如#module_weather或#module_news）是在左边或右边的div
• 以何种顺序的项目（如#module_weather或#module_news）是，例如在左侧的div：在第一#module_weather然后#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> 

我如何保存在cookie中的位置以及如何读取cookie，这样的项目在右侧列出股利和正确的顺序？

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

UPDATE

为了解决您的评论，你可能需要每一个需要保存/加载时间在每个元素进行迭代。

要保存：

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

加载：

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

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