UIkit - how to get order with the sortable component? - getuikit

Question

I implemented the UIkit sortable component and added a stop event. But I can't figure out how to calculate the new order if an item has been dragged. So far the only thing I can think of is giving each item an id then calculating based upon that id, but it doesn't seem like the proper way to do so

Answer 1

There is a quite simple way of achieving this. The element stores originalEvent where you can find also explicitOriginalTarget - our moved element. As it is wrapped in li inside ul, I went up to its parentNode (li), so I am at the level of elements I need, then converted it to jQuery object (you don't have to, I did it just because it was quick), then you can get its index. All of these values can be accessed by console.log(e);
Only problem with this solution is performance, it works, but when you move elements too often, it can show 0 instead of correct index value
EDIT: I realized you're probably asking about the whole set of items and their order, not only the index of currently moved item, so I added also console logging for this as well
Example below:
var indexes = new Array();
$(document).on('moved', '.uk-sortable', function(e) {
var currentLi = e.originalEvent.explicitOriginalTarget.parentNode;
indexes = [];
$(this).find('li').each(function() {
indexes.push($(this).data("index"));
});
alert("New position: " + $(currentLi).index());
console.log(indexes);
});
$('.uk-sortable').find('li').each(function(i) {
$(this).data("index", i);
indexes.push(i);
});
console.log(indexes);
<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.35/css/uikit.min.css" />
<!-- UIkit JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.35/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.35/js/uikit-icons.min.js"></script>
<ul class="uk-grid-small uk-child-width-1-4 uk-text-center" uk-sortable="handle: .uk-card" uk-grid>
<li>
<div class="uk-card uk-card-default uk-card-body">Item 1</div>
</li>
<li>
<div class="uk-card uk-card-default uk-card-body">Item 2</div>
</li>
<li>
<div class="uk-card uk-card-default uk-card-body">Item 3</div>
</li>
<li>
<div class="uk-card uk-card-default uk-card-body">Item 4</div>
</li>
<li>
<div class="uk-card uk-card-default uk-card-body">Item 5</div>
</li>
<li>
<div class="uk-card uk-card-default uk-card-body">Item 6</div>
</li>
<li>
<div class="uk-card uk-card-default uk-card-body">Item 7</div>
</li>
<li>
<div class="uk-card uk-card-default uk-card-body">Item 8</div>
</li>
</ul>

Answer 2

I came across this searching for something else and happen to know the answer you're looking for. You don't need jQuery or anything else for this, just UIkit.
<ul id="sortable-element" uk-sortable>
<li class="uk-sortable-item" data-id="1">Content</li>
<li class="uk-sortable-item" data-id="2">Content</li>
<li class="uk-sortable-item" data-id="3">Content</li>
<li class="uk-sortable-item" data-id="4">Content</li>
<li class="uk-sortable-item" data-id="5">Content</li>
</ul>
let sortable = UIkit.sortable("#sortable-element");
UIkit.util.on(sortable.$el, "added moved", function(e, sortable) {
sortable.items.forEach(function(item, index) {
console.log({ item, index});
// Grab data attributes if you need to.
// UIkit.util.data(item, "id");
});
});
The second parameter of the callback references the sortable component and contains the array of item elements. Loop through this array and use the index (0 based) to get the new order of items. It's important to use the .uk-sortable-item or define a different class with the cls-item option for the sortable component to return the items.
You also don't need to define sortable like I have, you can just use the UIkit.util.on with CSS selectors, e.g. UIkit.util.on("#sortable-element", "added moved removed start stop", function(e, sortable) { console.log(e.type); });
UIkit.util is more or less undocumented, but it's extremely well built. Check the repo to see available functions. They are binded to UIkit.util in the dist/uikit.js file. https://github.com/uikit/uikit/tree/develop/src/js/util

Answer 3

The easiest way I have found is to get the list of all the elements and perform a mapping operation that returns an array of unique & identifiable attributes (e.g. the IDs of the sortable elements.
The moved event has a detail property that's an array containing the UIKitComponent and the target element; you can get the items from the UIKitComponent.
const new_order = event.detail[0].items.map(el => el.id);
//["id-1", "id-2", "id-3"];
You can then get the indices after the fact, at least the messy DOM side of things is sorted.