How to keep sort order?

Question

I created Demo using packaging and draggabilly, where I have five grids. I can sort them using draggable. my sort.I need to keep the sorted grid.Here the meshes do not move when I check in Dev only the position changes not the mesh for sure.

Since I went through the ids but not used. Pay attention to the problem mentioned above.

Is there a way to keep the sort order? I do not want to use localStorage

My code follows

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; } 

Answer 1

A good “save” can mean two things.

• Saving values ​​temporarily, like localStorage / Cookies , as you mentioned in the question. The fact is that he will solve your problem of saving the order on the client, even if the user refreshes the page and returns, he / she will be able to check these values ​​and reorder them accordingly. The disadvantage is that if the user deletes his cache and history, the data may be missing when he / she revises the page.
• And another alternative would be to use the traditional approach, that is, use an Ajax call and send the data to an external script (PHP or Nodejs) that will store the values ​​in the database. That way, if there is a login system, you can simply post the values ​​to the database and act in this way.

Here is a simple code giving you an idea (using 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 

For Nodejs, you can do something similar to this: How to correctly send an array of identifiers to express

Hope this helps ...

Answer 2

Found a codepen that seems very similar to your example.

 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'); }); } 

Answer 3

This may not be the complete answer, but it may be useful, you can create a function from it

  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]; });