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

Question

我正在使用 WinMove 函数使具有 ibox-title 类的 div 可移动，但我不知道如何让用户计算机将 div 位置保存在 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 将包含在任何给定页面上的示例

<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 修改而改变。