Come salvare l'ordinamento?

Question

Ho creato Demo utilizzando packery e scarsamente dove ho cinque griglie. Posso ordinarle usando il draggable.Dopo aver fatto il mio sort.Io ho bisogno di salvare la griglia. Qui le griglie non si muovono quando controllo in dev solo la posizione sta cambiando, non esattamente la griglia.

Come ho passato id, ma di nessuna utilità.A causa del problema di cui sopra.

Esiste un modo per salvare l'ordinamento? Non voglio usare localStorage

Il mio codice segue

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

Trovato questo codepen che sembra molto simile al tuo esempio.

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 2

Beh 'salvare' può significare due cose.

• Salvare i valori temporaneamente come localStorage/Cookies come lei ha ricordato nella questione. Il problema è che risolverà il tuo problema di salvare l'ordine nel client, anche se l'utente aggiorna la pagina e torna indietro, lui/lei può controllare questi valori e riordinarli di conseguenza. Lo svantaggio è che, se l'utente cancella la sua cache e la cronologia, i dati potrebbero non essere presenti quando lui/lei rivisita la pagina.
• E l'altra alternativa sarebbe utilizzare un approccio tradizionale, ovvero utilizzare una chiamata Ajax e inviare dati a uno script back-end (PHP o Nodejs) che salverà i valori in un DB. In questo modo, se esiste un sistema di accesso di ordinamento, puoi semplicemente postare i valori su un database e procedere in questo modo.

Ecco un semplice codice per dare un'idea (con 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 

Per Nodejs, si può fare qualcosa simile a questo: How to send array of ids correctly in express

Hope I t aiuta ...