How to get the "id" of moving sortable UIKit 3 element using JavaScript?

Question

I want to know or print which card that is being dragged let's say upon drop and show it in the UIKit notification. I checked the console.log but nothing happens. From the documentation, it is only possible to get even on moving but not to get the value of the element that is being dragged. My code is below.

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');
});

Thanks!

Answer 1

If you modify:

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

To be:

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

It will display the elements id in the notification. You can go higher up in the "item" object in order to get more information on the dropped element.

Also, I'm using a template literal here to put the id in the notification. That's not supported via IE 11 so you might want to do something more traditional if you care about that.

---

For reference, you can see the data captured when moving elements via developer console here:

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