UIkit-如何获得可排序组件的订单? [英] UIkit - how to get order with the sortable component?

问题描述

我实现了 UIkit可排序组件，并添加了stop事件.但是我无法弄清楚如果拖动了一个项目该如何计算新订单.到目前为止，我唯一能想到的就是给每个项目指定一个ID，然后根据该ID进行计算，但这似乎不是正确的方法

解决方案

有一种非常简单的方法可以实现此目的. 元素存储 originalEvent ，您还可以在其中找到 explicitOriginalTarget -我们移动的元素.因为它包装在ul内部的li中，所以我转到了它的parentNode(li)，因此我处于所需元素的级别，然后将其转换为jQuery对象(您不必这样做，我只是因为它速度很快)，则可以获取其索引.所有这些值都可以通过console.log(e);

访问

此解决方案的唯一问题是性能，它可以正常工作，但是当您频繁移动元素时，它可能显示0而不是正确的索引值

编辑:我意识到您可能正在询问整个项目集及其顺序，不仅是当前移动项目的索引，因此我还为此添加了控制台日志记录

以下示例:

 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> 

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 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>

这篇关于UIkit-如何获得可排序组件的订单?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！