UIkit - 如何使用可排序组件获取订单？

Question

我实施了 UIkit sortable component 并添加了一个 stop 事件。但是如果一个项目被拖动，我无法弄清楚如何计算新订单。到目前为止，我唯一能想到的就是给每个项目一个 id，然后根据该 id 进行计算，但这似乎不是正确的方法

Answer 1

有一种非常简单的方法可以实现这一点。 element 存储 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>

Answer 2

我发现的最简单的方法是获取所有元素的列表并执行映射操作，returns 一组独特且可识别的属性（例如，可排序元素的 ID。

moved 事件有一个 detail 属性，它是一个包含 UIKitComponent 和目标元素的数组；您可以从 UIKitComponent 中获取 items。

const new_order = event.detail[0].items.map(el => el.id);

//["id-1", "id-2", "id-3"];

你可以在事后得到索引，至少混乱的 DOM 方面已经排序了。

Answer 3

我在搜索其他内容时遇到了这个问题，并且碰巧知道您正在寻找的答案。您不需要 jQuery 或其他任何东西，只需要 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");
    });
});

回调的第二个参数引用可排序组件并包含项目元素数组。遍历此数组并使用索引（基于 0）来获取项目的新顺序。使用 .uk-sortable-item 或使用 cls-item 选项为可排序组件定义不同的 class 到 return 项目很重要。

你也不需要像我一样定义 sortable ，你可以只使用 UIkit.util.on 和 CSS 选择器，例如UIkit.util.on("#sortable-element", "added moved removed start stop", function(e, sortable) { console.log(e.type); });

UIkit.util 或多或少没有记录，但它构建得非常好。检查存储库以查看可用功能。它们绑定到 dist/uikit.js 文件中的 UIkit.util。 https://github.com/uikit/uikit/tree/develop/src/js/util

UIkit - 如何使用可排序组件获取订单？

UIkit - how to get order with the sortable component?

getuikit