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