JSFiddle - React, Tailwind, and code Playground

by serio

HTML

<div data-order="10" data-guid="148" style="background:url(http://10.198.185.28/amextouchscreen/wp-content/uploads/2012/04/bleep-bloop-blap-1300x742.jpg)0 22px no-repeat;"><span class="top"></span></div>
<div data-order="1" data-guid="141" style="background:url(http://10.198.185.28/amextouchscreen/wp-content/uploads/2012/04/points-and-display-1300x742.jpg)0 22px no-repeat;"><span class="new"></span></div>
<div data-order="15" data-guid="137" style="background:url(http://10.198.185.28/amextouchscreen/wp-content/uploads/2012/04/making-the-most-of-your-cash-1300x742.jpg)0 22px no-repeat;"></div>
<div data-order="14" data-guid="131" style="background:url(http://10.198.185.28/amextouchscreen/wp-content/uploads/2012/04/flexible-travel-1300x742.jpg)0 22px no-repeat;"></div>
<div data-order="12" data-guid="128" style="background:url(http://10.198.185.28/amextouchscreen/wp-content/uploads/2012/04/how-to-shop-smart-1300x742.jpg)0 22px no-repeat;"><span class="new"></span></div>
<div data-order="7" data-guid="123" style="background:url(http://10.198.185.28/amextouchscreen/wp-content/uploads/2012/04/canadian-finance-blog-1300x742.jpg)0 22px no-repeat;"></div>
<div data-order="13" data-guid="114" style="background:url(http://10.198.185.28/amextouchscreen/wp-content/uploads/2012/04/amex-facebook-delights-1300x742.jpg)0 22px no-repeat;"></div>
<div data-order="2" data-guid="108" style="background:url(http://10.198.185.28/amextouchscreen/wp-content/uploads/2012/04/dress-for-success-1300x742.jpg)0 22px no-repeat;"></div>

JavaScript

jQuery.fn.sortElements = (function(){
 
    var sort = [].sort;
 
    return function(comparator, getSortable) {
 
        getSortable = getSortable || function(){return this;};
 
        var placements = this.map(function(){
 
            var sortElement = getSortable.call(this),
                parentNode = sortElement.parentNode,
 
                // Since the element itself will change position, we have
                // to have some way of storing its original position in
                // the DOM. The easiest way is to have a 'flag' node:
                nextSibling = parentNode.insertBefore(
                    document.createTextNode(''),
                    sortElement.nextSibling
                );
 
            return function() {
 
                if (parentNode === this) {
                    throw new Error(
                        "You can't sort elements if any one is a descendant of another."
                    );
                }
 
                // Insert before flag:
                parentNode.insertBefore(this, nextSibling);
                // Remove flag:
                parentNode.removeChild(nextSibling);
 
            };
 
        });
 
        return sort.call(this, comparator).each(function(i){
            placements[i].call(getSortable.call(this));
        });
 
    };
 
})();

$('div').sortElements(function(a, b){
   return $(a).data('order') > $(b).data('order') ? 1 : -1; 
});