在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修改进行更改。