2

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!

Rangka Kacang
  • 327
  • 1
  • 5
  • 12

1 Answers1

2

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

user1063287
  • 10,265
  • 25
  • 122
  • 218
Ron
  • 181
  • 3
  • 12
  • thank you so much. i've updated the codepen and accepted your answer. `https://codepen.io/rangka_kacang/pen/zWbOWo` – Rangka Kacang Apr 10 '18 at 23:01
  • No problem at all. Good luck! – Ron Apr 10 '18 at 23:49
  • Is it possible to make `item.detail[1]` a `$(this)` so that i can get information about it with `jQuery` - eg `$this.index()`, `$this.attr('data-id')`, `$this.text()` etc? Maybe `var $this = $(e.detail[1])`? Update: That seems to work. – user1063287 Sep 11 '18 at 08:21