Wie speichere ich die Sortierreihenfolge?

Question

Ich habe Demo erstellt von Packery mit und draggabilly, wo ich fünf grids.I haben sie die draggable.After ich meine sort.I machen mit sortiert werden müssen, die sortiert grid.Here die Gitter bewegen, werden nicht speichern, wenn ich in dev inspizieren nur die Position verändert nicht das Raster genau.

Wie ich ids bestanden haben, aber keine use.Due auf die Frage oben erwähnt.

Gibt es eine Möglichkeit, die Sortierreihenfolge zu speichern? Ich will nicht localStorage

Mein Code

folgt

HTML verwenden

<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

diesen codepen gefunden, die zu Ihrem Beispiel sehr ähnlich scheint.

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

Gut 'retten' kann zwei Dinge bedeuten.

• die Werte Speicher vorübergehend wie localStorage/Cookies, wie Sie in der Frage erwähnt. Die Sache ist, dass es Ihr Problem löst, die Bestellung im Kunden zu speichern, selbst wenn der Benutzer die Seite aktualisiert und zurückkommt, kann er/sie diese Werte überprüfen und sie entsprechend neu anordnen. Nachteil: Wenn der Benutzer seinen Cache und seinen Verlauf löscht, sind die Daten möglicherweise nicht mehr vorhanden, wenn er die Seite erneut besucht.
• Und die andere Alternative wäre traditionellen Ansatz zu verwenden, das heißt, einen Ajax-Aufruf zu verwenden und Daten an einen Back-End-Skript (PHP oder NodeJS) senden, um die Werte in ein DB zu sparen. Auf diese Weise können Sie, wenn ein Login-System existiert, die Werte einfach in eine Datenbank posten und auf diese Weise fortfahren.

Hier ist ein einfaches Code, den Sie eine Idee zu geben (mit 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 

Für NodeJS, Sie können etwas tun dies ähnlich zu: How to send array of ids correctly in express

Hoffnung i t hilft ...