如何保存排序顺序？

Posted 2023-05-08

【中文标题】如何保存排序顺序？

【英文标题】：How to save the sort order?

【发布时间】：2016-05-13 16:27:43

【问题描述】：

我通过使用 packery 和 draggabilly 创建了Demo，其中我有五个网格。我可以使用 draggable 对它们进行排序。在我进行排序之后。我需要保存排序后的网格。这里网格在我没有移动时仅在 dev 中检查位置正在改变，而不是完全改变网格。

因为我已经通过了 ids，但是没有用。由于上面提到的问题。

有没有办法保存排序顺序？我不想用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;

【问题讨论】：

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

Packery 以正确的排序顺序为您返回元素列表。因此，您的 sortedOrder 数组的 tabIndexes 顺序正确。到底出了什么问题？

我想保存用户选择的订单。

所以要保存拖动事件之前的网格顺序？？

一旦用户进行排序。我需要保存的最新订单。例如：如果它有订单A，B，C，D，E。然后他更改为B，C，D， E、AI需要保存最新的订单。

【参考方案1】：

'save' 可能意味着两件事。

暂时保存值，如您在问题中提到的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

对于 Nodejs，你可以做类似这样的事情：How to send array of ids correctly in express

希望对你有帮助...

【参考方案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');
  );

【讨论】：

事实上我是用那个来提取我的问题的。但是这是使用本地存储解决的。我不需要那个。

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

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

我链接的codepen将订单保存到localStorage。如果您尝试更改订单然后刷新页面，您将看到保存到 localStorage 的订单已加载。

那你想要什么？你想使用cookies吗？发布到服务器？你需要更具体。

【参考方案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];
        );