在Cookies/localStorage中保存多個div位置

Question

我正在使用WinMove函數來創建類IBox-title可移動的div，但我不知道如何讓用戶計算機將Cookie位置保存在cookie/localStorage中，因此div將被保存在用戶放置它們的地方。在每個頁面上都有多個頁面和多個div，所以對每個div都有一個函數是乾的，但是我也不知道如何製作這種動態的東西，因爲我對javascript/jquery的使用經驗很少，並且沒有使用cookie的經驗/ localStorage的。

的jsfiddle：https://jsfiddle.net/at38xkav/1/

功能，讓用戶走動的div在頁面上

function WinMove() { 
    var element = "[class*=col]"; 
    var handle = ".ibox-title"; 
    var connect = "[class*=col]"; 
    $(element).sortable(
     { 
      handle: handle, 
      connectWith: connect, 
      tolerance: 'pointer', 
      forcePlaceholderSize: true, 
      opacity: 0.8 
     }) 
     .disableSelection(); 
} 

什麼每一格將包括任何特定的網頁

<div class="row"> 
<div class="col-lg-6"> 
    <div class="ibox"> 
    <div class="ibox-title"> 
    <h5>Element 1</h5> 
    </div> 
    <div class="ibox-content"></div> 
</div> 
</div> 

對樣本

謝謝！ :)

Answer 1

我意識到你需要恢復排序元素的順序，而不是他們在頁面上的位置。對於您可以使用sortable插件update事件，在其處理函數你保存當前位置到本地存儲：

$(element).sortable({ 
    update: function(e, ui) { 
    var parent = ui.item.closest('[data-par_id]'); 
    var positions = [] 
    $('[data-col_id]').each(function() { 
     positions.push({ 
     col_id : $(this).data('col_id'), 
     par_id : $(this).closest('[data-par_id]').data('par_id') 
     }) 
    }) 
    localStorage.setItem('all_orders', JSON.stringify(positions)) 
    console.log(JSON.stringify(positions)) 
    } 
}) 

現在，做恢復下一次頁面被打開的順序，我只想把保存的數組並且，以該順序，提取對應的元件追加它返回清單：

(function() { 
    // get saved positions 
    var positions = localStorage.getItem('all_orders') 
    console.log(positions) 
    positions = positions ? JSON.parse(positions) : [] 
    // sort the list 
    for (var i in positions) { 
    var element = positions[i] 
    $('[data-par_id="' + element.par_id + '"]').append(
     $('[data-col_id="' + element.col_id + '"]').detach() 
    ) 
    } 
})() 

這種方法要求每行有一個唯一的標識符（在上面它data-col_id的代碼），並且每個容器還具有唯一的標識符（我選擇的是data-par_id）。

此外，你不得不打電話.sortable不是你想要移動的元素，而是他們的父母。

Here是一個工作小提琴，其中我重寫了你的WinMove函數。

Answer 2

你必須以某種方式區分它們。我不知道你想要硬編碼變量是什麼意思，但你必須有一些東西。例如，你可以給每個div一個屬性data-col_id="some_unique_value"。之後，當你要保存的位置你提取它們和地方保持：

function() { 
    var positions = {} 
    $('[data-col_id]').each(function() { 
     positions[$(this).data('col_id')] = $(this).offset() 
    }) 
    localStorage.setItem('col_positions', JSON.stringify(positions)) 
} 

當你需要恢復他們，做相反的事情 - 得到保存的數據，並使用它：

function() { 
    var positions = localStorage.getItem('col_positions') 
    positions = positions ? JSON.parse(positions) : {} 
    for (var col_id in positions) 
     $('[data-col_id="' + col_id + '"]').offset(positions[col_id]) 
} 

當然，你的定位可能與使用jquery offset方法不同，這只是一個例子。此外，建議命名（data-col_id）也只是一個例子，可以輕鬆更改。

---

如果你的HTML結構是不變的，你肯定這會是恆定的，你能避免給人元素的任何唯一的名稱，直接使用網頁標識符（例如location.href）和XPath的組合。你可以找到如何get xpath from an element以及如何retrive the element knowing xpath。但是，我真的建議不要這樣做，因爲xpath很不可靠，並且可以通過輕微的DOM修改進行更改。