localStorageを使ってソート可能なdivの位置/場所を保存する

Question

私はレイアウトを保存するソート可能なdiv設定をしようとしています。私は明らかにこれに何か間違っている、または何かを簡単に欠けている。 ソートが正しく機能していますが、保存と読み込みが正しく機能していません。 リフレッシュすると、すべて元に戻り、選択したレイアウトを保存する必要があります。これはjquery cookieプラグインでやや動作していましたが、私はそれを使用したくありません。 私は誰かが私を助けてくれることを願っています。私はここでたくさんの投稿を見てきましたが、私の質問に答える何かを見つけられませんでした。Googleは私の友人であり、この点まで私を得ました。しかし、今私は迷っている。 jsfiddle

Answer 1

へ

$(function() { 
    $('[id^="sortable"]').sortable({ 
    connectWith: '[id^="sortable"]', 
    helper: "clone", 
    appendTo: ".primary_container", 
    update: function() { 
     $('[id^="sortable"]').children().each(function(){ 
      savePosition($(this).attr("id")); 
     }); 
    } 
    }); 
}); 

function savePosition(id){ 
    var el = $("#" + id); 
    var container = el.parent().attr("id"); 
    var index = el.index(); 
    localStorage.setItem(id, JSON.stringify({ container:container, index:index })); 
} 

function loadPosition(id){ 
    var el = $("#" + id); 
    var position = JSON.parse(localStorage.getItem(id)); 
    console.log(position); 
    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); 
    }  

} 

$('[id^="sortable"]').children().each(function(){ 
    loadPosition($(this).attr("id")); 
}); 

リンクはそれを考え出しました。

localStorage.setItem(id, JSON.stringify({ container:container, index:index })); 

そして

作業の変更を反映するためにポストを更新しました

var position = JSON.parse(localStorage.getItem(id)); 

に変更

var position = JSON.parse(localStorage.getItem('positions')); 

に変更する必要が

localStorage.setItem('positions', $("#" + id).sortable("toArray")); 

。