javascript - 如何使用 JavaScript 获取移动可排序 UIKit 3 元素的 "id"？

Question

我想知道或打印哪张卡片正在被拖放，让我们说一下拖放并在 UIKit 通知中显示它。我检查了 console.log 但没有任何反应。从文档中，只能在移动时获得平衡，但不能获得被拖动元素的值。我的代码如下。

https://codepen.io/rangka_kacang/pen/zWbOWo

HTML:

<div class="uk-section uk-section-primary uk-padding-remove-vertical">
    <div class="uk-container">
        <div uk-grid>
            <div class="uk-width-1-6">
                <nav uk-navbar>
                    <div class="uk-navbar-center">
                        <a class="uk-navbar-item uk-logo" href="">
                            <img class="uk-margin-small-right" height="48" width="48" src="https://image.flaticon.com/icons/svg/426/426121.svg">
                            Dashboard
                        </a>
                    </div>
                </nav>
            </div>
            <div class="uk-width-expand">
                <nav uk-navbar>
                    <div class="uk-navbar-left">
                        <a class="uk-navbar-item" href="">
                            <i class="fas fa-bars fa-2x"></i>
                        </a>
                    </div>
                    <div class="uk-navbar-right">
                        <ul class="uk-navbar-nav">
                            <li>
                                <a>
                                    <div class="uk-text-center">
                                        <i class="fas fa-user-circle fa-2x"></i> <i class="fas fa-chevron-down"></i>
                                        <div class="uk-navbar-subtitle">Account</div>
                                    </div>
                                </a>
                            </li>
                        </ul>
                    </div>
                </nav>
            </div>
        </div>
    </div>
</div>

<div class="uk-section uk-section-secondary uk-padding-medium">
    <div class="uk-container">

<ul id="sortable" class="uk-grid-small uk-text-center" uk-sortable="handle: .uk-sortable-handle" uk-grid>
    <li id="name">
        <div class="uk-card uk-card-default uk-card-body">
            <span class="uk-sortable-handle uk-margin-small-right" uk-icon="icon: table"></span>Name
        </div>
    </li>
    <li id="email">
        <div class="uk-card uk-card-default uk-card-body">
            <span class="uk-sortable-handle uk-margin-small-right" uk-icon="icon: table"></span>Email
        </div>
    </li>
    <li id="address">
        <div class="uk-card uk-card-default uk-card-body">
            <span class="uk-sortable-handle uk-margin-small-right" uk-icon="icon: table"></span>Address
        </div>
    </li>
</ul>

  </div
</div

JS:

UIkit.util.on('#sortable', 'moved', function () {
  //console.log();
  UIkit.notification('Card has been moved.', 'success');
});

谢谢!

Answer 1

如果你修改:

UIkit.util.on('#sortable', 'moved', function () {
  //console.log();
  UIkit.notification('Card has been moved.', 'success');
});

成为:

UIkit.util.on('#sortable', 'moved', function (item) {
  console.log(item.detail[1].id)
  UIkit.notification(`Card is ${item.detail[1].id}`, 'success');
});

它将在通知中显示元素 id。您可以在“item”对象中更上层以获得有关掉落元素的更多信息。

此外，我在这里使用模板文字将 id 放入通知中。 IE 11 不支持它，因此如果您关心它，您可能想做一些更传统的事情。

---

作为引用，您可以在此处查看通过开发者控制台移动元素时捕获的数据:

https://getuikit.com/assets/uikit/tests/sortable.html