如何保存排序顺序？

Question

我已经使用packery和draggabilly创建了Demo，其中有五个网格。我可以使用可拖动功能对它们进行排序。在我完成排序后，我需要保存排序后的网格。但是，在检查开发时，这些网格没有移动，只有位置发生了变化。

虽然我已经传递了id，但是由于上述问题而无法使用它们。

是否有任何方法可以保存排序顺序？ 我不想使用localStorage

我的代码如下：

HTML

<h1>Image sort</h1>
<div class="packery">
  <div class="item w2 h2 i1" tabindex="0">A</div>
  <div class="item w2 h2 i2" tabindex="1">B</div>
  <div class="item w2 h2 i3" tabindex="2">C</div>
  <div class="item w2 h2 i4" tabindex="3">D</div>
  <div class="item w2 h2 i5" tabindex="4">E</div>
</div>

JS

// http://packery.metafizzy.co/packery.pkgd.js and 
// http://draggabilly.desandro.com/draggabilly.pkgd.js added as external resource

// ----- text helper ----- //

$(function() {

  var $container = $('.packery').packery({
    columnWidth: 100,
    rowHeight: 180,
    // disable initial layout
    isInitLayout: false
  });

  var pckry = $container.data('packery');


  // ----- packery setup ----- //

  // trigger initial layout
  $container.packery();

  var itemElems = $container.packery('getItemElements');
  // for each item element
  $( itemElems ).each( function( i, itemElem ) {
    // make element draggable with Draggabilly
    var draggie = new Draggabilly( itemElem );
    // bind Draggabilly events to Packery
    $container.packery( 'bindDraggabillyEvents', draggie );
  });   

CSS

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

body { font-family: sans-serif; }

.packery {
  background: #FDD;
  background: hsla(45, 100%, 40%, 0.2);
  max-width: 460px;
}

/* clearfix */
.packery:after {
  content: ' ';
  display: block;
  clear: both;
}

.item {
  width: 240px;
  height: 140px;
  float: left;
  background: #C09;
  border: 4px solid #333;
  border-color: hsla(0, 0%, 0%, 0.3);
  font-size: 20px;
  color: white;
  padding: 10px;
}

.item:hover {
  border-color: white;
  cursor: move;
}


.item.w2 { width:   400px;  }
.item.h2 { height:  140px;  }

.item.w2.i1 { background: #ffff00; }
.item.w2.i2 { background: #ff6633; }
.item.w2.i3 { background: #00c6d7; }
.item.w2.i4 { background: #990099; }
.item.w2.i5 { background: #EEEEEE; }

.item.is-dragging,
.item.is-positioning-post-drag {
  border-color: white;
  background: #09F;
  z-index: 2;
}

- Raviteja

---

你可以将排序顺序保存在客户端（例如使用localStorage）或服务器端。请注意，根据新的排序顺序生成的新HTML将必须在服务器端或客户端上（通过动态创建HTML）进行。 - Amnon

Packery会按正确的排序顺序返回元素列表。因此，您的sortedOrder数组具有正确的tabIndexes顺序。到底出了什么问题？ - Prashant

我想按照用户选择的顺序保存订单。 - Raviteja

在我的演示中，我正在使用localStorage。但我不需要它。是否有其他方法来保存订单？ - Raviteja

你能清楚地解释一下你所说的“保存”是什么意思吗？是指将值保存到数据库以便以后使用，还是将该值复制到另一个变量中（如果刷新页面，则会重置）...？ - dvenkatsagar

Answer 1

“保存”可以有两个意思。

• 像你在问题中提到的那样，将值暂时保存在localStorage/Cookies中。这样做可以解决在客户端保存订单的问题，即使用户刷新页面并返回，他/她也可以查看这些值并相应地重新排序。缺点是，如果用户删除了他/她的缓存和历史记录，在他/她重新访问页面时可能不会有数据。
• 另一个选择是使用传统方法，即使用Ajax调用并将数据发送到后端脚本(PHP或Nodejs)，然后将值保存到数据库中。这种方法，如果存在某种登录系统，您只需将值发布到数据库中并按照该方式进行即可。

以下是一个简单的代码示例（使用PHP）：

JS

$.ajax({
    url: 'test.php',
    type: 'POST',
    data: {order : sortOrder},
    success: function(result){
          // do something
       }
 });

test.php

$order = $_REQUEST['order'];
echo $order;
// Do something here that will store the values to the database

对于Node.js，您可以类似于以下操作：如何在Express中正确发送ID数组。

希望这能有所帮助...

- dvenkatsagar

Answer 2

我找到了这个CodePen，它看起来与你的例子非常相似。

Packery.prototype.sortItems = function( keys, getSortKey ) {
  // copy items
  //var _items = this.items.slice(0);
  var itemsBySortKey = {};
  var key, item;
  for ( var i=0, len = this.items.length; i < len; i++ ) {
    item = this.items[i];
    key = getSortKey( item );
    itemsBySortKey[ key ] = item;
  }

  i=0;
  len = keys.length;
  var sortedItems = [];
  for ( ; i < len; i++ ) {
    key = keys[i];
    item = itemsBySortKey[ key ];
    this.items[i] = item;
  }  
};

var storedSortOrder = localStorage.getItem('sortOrder')
if ( storedSortOrder ) {
  storedSortOrder = JSON.parse( storedSortOrder );
  pckry.sortItems( storedSortOrder, function( item ) {
    return item.element.getAttribute('tabindex');
  });
}

- Jaydo

---

实际上，我使用它提取了我的问题。但是，这已经通过本地存储解决了。我不需要那个了。 - Raviteja

你说你想要保存它，但实际上你想做什么？ - Jaydo

我将更改网格的位置。我需要保存该顺序。 - Raviteja

我链接的Codepen将顺序保存到localStorage中。如果您尝试更改顺序，然后刷新页面，您将看到已加载保存到localStorage中的顺序。 - Jaydo

我不想将那个订单存储在本地存储中。 - Raviteja

那你想要什么？想要使用Cookie吗？将它发布到服务器上？你需要更具体地说明。 - Jaydo

Answer 3

这可能不是完整的答案，但可能会有帮助，你可以从中创建一个函数

    var saved_order = {};

    Object.keys(object_to_sort)
        .sort()
        .forEach(function(key, i) {
            console.log('new order: ' + key, ':', object_to_sort[key]);
            saved_order[key] = object_to_sort[key];
        });

- Magor Menessy