JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#" id="trigger">Sort now</a>
<br/>
<br/>
<div id="wrapper">
        <div id="scroller">
            <ul id="sortable">
                                <li class="ui-state-default" ><a rel="example_group" sortelm="abc" href="#"><img src="http://awishcar.com/titan/img/images(1).jpg" width="100%" height="100%"/></a></li>
                                <li class="ui-state-default"><a rel="example_group" sortelm="zzz" href="#"><img src="http://awishcar.com/titan/img/images(2).jpg" width="100%" height="100%"/></a></li>
                                <li class="ui-state-default"><a rel="example_group" sortelm="qa" href="#"><img src="http://awishcar.com/titan/img/images(3).jpg" width="100%" height="100%"/></a></li>
                                <li class="ui-state-default"><a rel="example_group" sortelm="uty" href="#"><img src="http://awishcar.com/titan/img/images(4).jpg" width="100%" height="100%"/></a></li>
                                <li class="ui-state-default"><a rel="example_group" sortelm="wsx" href="#"><img src="http://awishcar.com/titan/img/images(5).jpg" width="100%" height="100%"/></a></li>
                                <li class="ui-state-default"><a rel="example_group" sortelm="ewqw" href="#"><img src="http://awishcar.com/titan/img/images(6).jpg" width="100%" height="100%"/></a></li>
                                <li class="ui-state-default"><a rel="example_group" sortelm="xsa" href="#"><img src="http://awishcar.com/titan/img/images(7).jpg" width="100%" height="100%"/></a></li>
                                <li class="ui-state-default"><a rel="example_group" sortelm="axs" href="#"><img src="http://awishcar.com/titan/img/images(8).jpg" width="100%" height="100%"/></a></li>
                                <li class="ui-state-default"><a rel="example_group" sortelm="2322" href="#"><img src="http://awishcar.com/titan/img/images(9).jpg" width="100%" height="100%"/></a></li>
                                <li class="ui-state-default"><a...

CSS

#sortable { list-style-type: none; margin: 0; padding: 0; }
        #sortable li { margin: 0 25px 25px 0; float: left; width: 130px; height: 130px; font-size: 4em; text-align: center; border:0px solid #777; -webkit-box-shadow: 2px 2px 10px rgba(1,0,0,.3);}

JavaScript

$('#sortable li').each(function() {
    $(this).data('pos', $(this).offset()); //Recording the absolute coords at the start.
});
$('#sortable li').css('position', 'absolute').each(function () {
    $(this).offset($(this).data('pos')); //Now we make them absolute but previosuly we had already recorded their intended positions. So we use them here.
});

function swap(from, to, duration) {
    duration = duration || 2000; //Default duration if not given is 2s.
    a = $(from);
    b = $(to);
    a.animate({
        'left':b.data('pos').left,
        'top':b.data('pos').top
    }, duration);
}

$('#trigger').click(function (e) {
    var sortedList = [];
    var unsortedList = $('#sortable li');
    
    for(var i = 0, l = unsortedList.length; i < l; i++)
        sortedList.push(unsortedList[i]); //Copying array since sort modifes the actual array.
    
    sortedList.sort(function (a, b) {
        a = $('a', a).attr('sortelm');
        b = $('a', b).attr('sortelm');
        return a == b ? 0 : (a < b ? -1 : 1);
    });
    
    for(var i = 0, l = unsortedList.length; i < l; i++) {
        swap(unsortedList[i], sortedList[i]); //Move from unsorted postion to sorted postion.
    }
    
    e.preventDefault();
});