UIkit sortable javascript

index.html

<ul class="uk-sortable uk-list uk-list-space" data-uk-sortable="{handleClass:'uk-panel'}">
<li data-id="1">
<div class="uk-panel uk-panel-box">
    <div class="uk-badge uk-badge-notification uk-panel-badge">0</div>
    <strong>Item 1</strong>
</div>
</li>
  <li data-id="2">
<div class="uk-panel uk-panel-box">
    <div class="uk-badge uk-badge-notification uk-panel-badge">0</div>
    <strong>Item 2</strong>
</div>
</li>
  <li data-id="3">
<div class="uk-panel uk-panel-box">
    <div class="uk-badge uk-badge-notification uk-panel-badge">0</div>
    <strong>Item 3</strong>
</div>
</li>
  <li data-id="4">
<div class="uk-panel uk-panel-box">
    <div class="uk-badge uk-badge-notification uk-panel-badge">0</div>
    <strong>Item 4</strong>
</div>
</li>
  <li data-id="5">
<div class="uk-panel uk-panel-box">
    <div class="uk-badge uk-badge-notification uk-panel-badge">0</div>
    <strong>Item 5</strong>
</div>
</li>
  <li data-id="6">
<div class="uk-panel uk-panel-box">
    <div class="uk-badge uk-badge-notification uk-panel-badge">0</div>
    <strong>Item 6</strong>
</div>
</li>
</ul>
<button type="button" class="uk-button uk-button-success">Save</button>

script.js

(function ($) {
        $(document).on('ready', function () {
            var sortable = $('[data-uk-sortable]'),
            	  button = $('button');
            button.click(function () {
              saveOrdering(sortable, button);
            });
            sortable.on('stop.uk.sortable', function (e, el, type) {
                setOrdering(sortable, el);
            });
            setOrdering(sortable);
        });
        function setOrdering(sortable, activeEl) {
            var ordering = 1;
            sortable.find('>li').each(function () {
                var $ele = $(this);
                $ele.data('ordering', ordering);
                $ele.find('div.uk-badge').text(ordering);
                ordering++;
            });
            if (activeEl) {
                activeEl.find('div.uk-badge').addClass('uk-animation-scale-down');
            }
        }
  			function saveOrdering (sortable, button) {
          var url = 'index.php', 
              data = {
 		           task: 'saveOrdering',
 		           ordering: {}
 		         };
          sortable.find('>li').each(function () {
             data.ordering[$(this).data('id')] = $(this).data('ordering');
          });
          button.prop('disabled', true);
          console.log(data); //data going to server
          $.getJSON(url, data, function (result) {
            console.log(result); //json response from server
            button.prop('disabled', false);
          });
          setTimeout(function(){button.prop('disabled', false);},1000);//for testing only!
        }
    })(jQuery);

UIkit-sortable-javascript.markdown

UIkit sortable javascript

Connects the sortable to a script that can save it via ajax

A Pen by Matthijs Alles on CodePen.

License.