Sort list from array with jQuery sortable

Question

I know how to save the position of the list elements to a database or localstorage or something similar. But how can I reorder the list with JavaScript from the positions which are saved in my array?

I had a look and StackOverflow and found the following code, but it doesn't work (it just empties my list):

// Get your list items
var items = $('#sortable').find('li');

// The new index order for each item
var order = store.get('sortableIDsOrder');

// Map the existing items to their new positions        
var orderedItems = $.map(order, function(value) {
    return items.get(value);
});

// Clear the old list items and insert the newly ordered ones
$('#sortable').empty().html(orderedItems);

My array looks like:

[portrait-sms,portrait-pc,portrait-mail,portrait-calendar,portrait-facebook,portrait-twitter,portrait-whatsapp,portrait-skype,portrait-viber,portrait-instagram]

And my HTML looks like:

<li id="portrait-sms"><a href="sms:">...</li>
<li id="portrait-mail"><a href="mailto:">...</li>
<li id="portrait-pc"><a href="#">...</li>
...

David Thomas · Accepted Answer · 2014-05-30 22:24:45Z

The simplest solution I can think of, given only the array (that I assume you've retrieved from somewhere), is:

// assuming this is the array you've recovered from whereever:
var storedArray = ['portrait-sms',
                   'portrait-pc',
                   'portrait-mail',
                   'portrait-calendar',
                   'portrait-facebook',
                   'portrait-twitter',
                   'portrait-whatsapp',
                   'portrait-skype',
                   'portrait-viber',
                   'portrait-instagram'];

function reorder(orderedArray) {
    // caching variables:
    var el, pre, p;2
    // iterating over the elements of the array, using Array.prototype.forEach:
    orderedArray.forEach(function (a, b, c) {
        // a: the current element in the array,
        // b: the index of the current element in the array,
        // c: the array itself
        if (b > 0) {
            // caching the element with the id of the element in the array:
            el = document.getElementById(a);
            // finding the parentNode of that element:
            p = el.parentNode;
            // getting the previous element:
            pre = document.getElementById(c[b - 1]);

            // inserting the element with the id of the current element
            // before the nextSibling of the element with the id of the
            // previous element in the array:
            p.insertBefore(el, pre.nextSibling);
        }
    });
}

reorder(storedArray);

JS Fiddle demo.

References:

Ankur Kumar · Accepted Answer · 2014-05-30 22:24:33Z

0

If you know the elements you have in the database array before hand and they have static values, you can create a new JavaScript array variable by iterating over database array and by forming a new JS array which you use while loading the UI.

On the other hand, if your requirement is to just sort the array during UI loading time instead of showing elements in a fixed order(as retrieved from database), you can use JQuery Table Plugins like DataTable.

answered May 30, 2014 at 22:24

Ankur Kumar

417 bronze badges

Collectives™ on Stack Overflow

Sort list from array with jQuery sortable

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related