javascript - How to save the sort order? - Stack Overflow

admin管理员组

文章数量:1401307

I have created Demo by using packery and draggabilly where I have five grids.I can sort them using the draggable.After I make my sort.I need to save the sorted grid.Here the grids are not moving when I inspect in dev only the position is changing not the grid exactly.

As I've passed ids,but of no use.Due to the issue mentioned above.

Is there any way of saving the sort order ? I don't 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

// .pkgd.js and 
// .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;
}

I have created Demo by using packery and draggabilly where I have five grids.I can sort them using the draggable.After I make my sort.I need to save the sorted grid.Here the grids are not moving when I inspect in dev only the position is changing not the grid exactly.

As I've passed ids,but of no use.Due to the issue mentioned above.

Is there any way of saving the sort order ? I don't 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./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;
}

• javascript
• jquery
• sorting
• draggable
• packery

Share Improve this question Follow edited Feb 9, 2016 at 4:25 Raviteja asked Feb 4, 2016 at 7:07 RavitejaRaviteja 3,4892323 gold badges4545 silver badges7474 bronze badges 10

• You can save the sort order either on the client side (using localStorage for example) or on the server side. Note that the new HTML (according to the new sort order) will have to be produced on the server side or on the client side (via creating the HTML dynamically) – Amnon Commented Feb 4, 2016 at 7:16
• Packery is giving you back the list of elements in correct sorted order. So, your sortedOrder array has tabIndexes in correct order. What exactly is going wrong? – Prashant Commented Feb 7, 2016 at 7:13
• I want to save the order as the User chooses to. – Raviteja Commented Feb 8, 2016 at 4:00
• So you want to save the previous order of the grid before the drag events?? – dvenkatsagar Commented Feb 9, 2016 at 4:30
• Once the user makes his sort.The latest order I need to save.For eg: If it has order A,B,C,D,E.Then he changes to B,C,D,E,A.I need save the latest order. – Raviteja Commented Feb 9, 2016 at 4:32

 |  Show 5 more ments

3 Answers 3

Sorted by: Reset to default 3 +25

Well 'save' can mean two things.

• Saving the values temporarily like localStorage/Cookies as you mentioned in the question. The thing is that, it will solve your problem of saving the order in the client, even if the user refreshes the page and es back, he/she can check these values and reorder them accordingly. Disadvantage is that, if the user deletes his/her cache and history, the data might not be there when he/she revisits the page.
• And the other alternative would be to use traditional approach, that is, to use a Ajax call and send data to a back-end script(PHP or Nodejs) that will save the values to a DB. This way, if there exists a login system of sorts, you can just post the values to a database and proceed in that manner.

Here is a simple code to give 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 send array of ids correctly in express

Hope it helps...

Found this codepen which 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');
  });
}

It might not be a full answer, but might be helpful, you could 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];
        });

本文标签： javascriptHow to save the sort orderStack Overflow