UIkit-如何获得可排序组件的订单?

以下示例: 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); <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.35/css/uikit.min.css" /><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> 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 解决方案 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 valueEDIT: 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 wellExample 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);<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.35/css/uikit.min.css" /><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> 这篇关于UIkit-如何获得可排序组件的订单?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！