Question

我正在使用WinMove函数来制作具有类ibox-title可移动的div，但我不知道如何让用户计算机在cookie / localStorage中保存div位置，这样div就会保存在哪里用户放置了它们。每个页面上有多个页面和多个div，所以每个div都有DRY可以有一个函数但我也不知道如何制作这样的动态，因为我对javascript / jquery的经验很少，而且没有使用cookies的经验/ 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

你必须以某种方式区分它们。我不知道你不想要硬编码的变量是什么意思，但是你必须要有东西。例如，您可以为每个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修改来改变。

Answer 2

我意识到你需要恢复可排序元素的顺序，而不是它们在页面上的位置。为此，您可以使用update事件sortable插件，在其处理程序中将当前位置保存到本地存储中：

$(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）。< / p>

此外，您必须在.sortable上打电话给您想要移动的元素，而不是他们的父母。

Here是一个工作小提琴，我重写了你的WinMove功能。

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

2 个答案: