Jak zapisać kolejność sortowania?

Question

Utworzyłem Demo przy użyciu packery i draggabilly, gdzie mam pięć siatek.Możesz je sortować za pomocą przeciągania. Po dokonaniu sortowania.Muszę zapisać posortowaną siatkę.Tutaj siatki nie są w ruchu, gdy sprawdzam w dev tylko pozycja zmienia nie dokładnie siatkę.

Po przejściu identyfikatora, ale bezużytecznego.Ze względu na wspomniany powyżej problem.

Czy istnieje sposób zapisania kolejności sortowania? Nie chcę używać localStorage

Mój kod następująco

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

Znaleziono ten codepen, który wydaje się bardzo podobny do twojego przykładu.

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

Dobrze 'zapisz' może oznaczać dwie rzeczy.

• Zapisywanie wartości tymczasowo jak localStorage/Cookies jak wspomniano w pytaniu. Chodzi o to, że rozwiąże to problem z zapisaniem zamówienia w kliencie, nawet jeśli użytkownik odświeży stronę i wróci, może sprawdzić te wartości i odpowiednio je uporządkować. Wadą jest to, że jeśli użytkownik usunie swoją pamięć podręczną i historię, dane mogą nie być dostępne, gdy ponownie wróci na stronę.
• Inną alternatywą byłoby użycie tradycyjnego podejścia, tj. Użycie wywołania Ajax i wysłanie danych do skryptu back-end (PHP lub Nodejs), który zapisze wartości w DB. W ten sposób, jeśli istnieje system sortowania, możesz po prostu opublikować wartości w bazie danych i postępować w ten sposób.

Oto prosty kod daje wyobrażenie (używając 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 

Dla Nodejs można coś zrobić podobne do tego: How to send array of ids correctly in express

Hope i t pomaga ...