Sauvegarder et restaurer des positions triées à partir de deux listes

Question

J'utilise l'excellente bibliothèque Sortable JS de RubaXa pour permettre le réarrangement par glisser-déposer des divs sur un tableau de bord basé sur Bootstrap. Comme les divs sont tous en 2 colonnes (gauche et droite), j'ai défini les colonnes avec les ids "leftColumn" et "rightColumn".

Afin de permettre le glissement entre les colonnes, j'ai configuré les deux tables de tri avec le même groupe, comme ceci :

Sortable.create(leftColumn, {
    group: 'dash_sections',
});
Sortable.create(rightColumn, {
    group: 'dash_sections',
});

J'essaie maintenant de charger et de sauvegarder la commande à partir des deux listes (le groupe entier). J'ai placé data-id dans chacune des balises div, et j'essaie d'utiliser le code suivant pour sauvegarder et rétablir l'ordre de tout cela.

Sortable.create(rightColumn, {
    group: 'dash_sections',
    store: {
        get: function (sortable) {
            var order = localStorage.getItem(sortable.options.group);
            return order ? order.split('|') : [];
        },

        set: function (sortable) {
            var order = sortable.toArray();
            localStorage.setItem(sortable.options.group, order.join('|'));
        }
    }
});

Cependant, je ne sauvegarde et ne restaure l'ordre que pour cette colonne, et non pour l'ensemble du groupe. Je souhaite que l'ordre du groupe soit stocké dans une seule chaîne dans la base de données. Comment dois-je procéder pour sauvegarder et restaurer l'ordre du groupe entier ?

Mise à jour : J'ai mis un code similaire dans les deux fonctions sortable.create, en utilisant "leftcol" et "rightcol" au lieu de sortable.options.group. Cela permet de sauvegarder correctement l'ordre de chaque sortable tant que l'on ne glisse pas entre les colonnes. Je suis toujours à la recherche d'un moyen de sauvegarder l'ordre même lorsque l'on glisse entre les colonnes.

Answer 1

Voici comment j'ai implémenté une fonctionnalité similaire

Introduit un category aux options triables :

var leftColumnOptions = {
    group: "dash_sections",
    category: "left_column",
    store: setupStore()
};

var rightColumnOptions = {
    group: "dash_sections",
    category: "right_column",
    store: setupStore()
}

setupStore La fonction vérifie si localStorage disponibilité et application get y set

function setupStore() {
    if (localStorageAvailable) { // basic localStorage check: (typeof (localStorage) !== "undefined")
        return {
            get: getValue,
            set: setValue
        };
    }
    return {}; 
}

getValue y setValue récupère et stocke les identifiants des articles en fonction du nom de la catégorie définie dans les options ci-dessus.

function getValue(sortable) {
    var order = localStorage.getItem(sortable.options.category);
    return order ? order.split('|') : [];       
}

function setValue(sortable) {
    var order = sortable.toArray();
    localStorage.setItem(sortable.options.category, order.join('|'));
}

C'est une bonne idée de vérifier les informations de commande stockées dans localStorage avant d'initialiser Sortable, j'utilise lodash pour des raisons de commodité.

function applyState($section, categoryName) {
    if (localStorageAvailable) {
        var order = localStorage.getItem(categoryName);
        var itemIds = order ? order.split('|') : [];
        var $items = _.map(itemIds, function(itemId, index) {
            return $("[data-id='" + itemId + "'");
        });
        $section.append($items);
    }
}

l'usage serait :

applyState($(".js-left-column"), "left_column");
applyState($(".js-right-column"), "right_column");
// initialize sortable

Code entier :

HTML :

<div class="js-two-column-sortable js-left-column" data-category="left_column">
    <!-- elements -->
</div>
<div class="js-two-column-sortable js-right-column" data-category="right_column">
    <!-- elements -->
</div>

JS :

var localStorageAvailable = (typeof localStorage !== "undefined");

function getValue(sortable) {
    var order = localStorage.getItem(sortable.options.category);
    return order ? order.split('|') : [];       
}

function setValue(sortable) {
    var order = sortable.toArray();
    localStorage.setItem(sortable.options.category, order.join('|'));
}

function setupStore() {
    if (localStorageAvailable) {
        return {
            get: getValue,
            set: setValue
        };
    }
    return {}; 
}

function onAdd(evt) {
    setValue(this);
}

function applyState($section, categoryName) {
    if (localStorageAvailable) {
        var order = localStorage.getItem(categoryName);
        var itemIds = order ? order.split('|') : [];
        var $items = _.map(itemIds, function(itemId, index) {
            return $("[data-id='" + itemId + "'");
        });
        $section.append($items);
    }
}

var options = {
    group: "two-column-sortable",
    store: setupStore(),
    onAdd: onAdd
};

function init() {

    $(".js-two-column-sortable").each(function(index, section) {
        var $section = $(section);
        var category = $section.attr("data-category");
        var sortableOptions = _.extend({}, options, { category: category });
        applyState($section, category);
        $section.data("twoColumnSortable", new Sortable(section, sortableOptions));
    });
}

init();