1

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

4

3 回答 3

4

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

于 2017-11-29T17:26:40.777 回答
0

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

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

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

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

然后，您可以在事后获取索引，至少对事物的混乱 DOM 方面进行了排序。

于 2020-06-24T10:05:35.713 回答
0

我在寻找其他东西时遇到了这个问题，并且碰巧知道您正在寻找的答案。你不需要 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可排序组件的选项来返回项目是很重要的。

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

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

于 2020-12-30T03:33:35.007 回答