UIKit 3 Sortable Test

index.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-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-muted uk-padding-small">
	<div class="uk-container">
    <h3 class="uk-heading-line uk-text-center"><span>Drag the cards below.</span></h3>
<ul id="sortable" class="uk-grid-medium uk-child-width-1-2 uk-child-width-1-4@s uk-text-center" uk-sortable="handle: .uk-card" uk-grid>
    <li id="Item 1">
        <div class="uk-card uk-card-default uk-card-hover uk-card-body">Item 1</div>
    </li>
    <li id="Item 2">
        <div class="uk-card uk-card-default uk-card-hover uk-card-body">Item 2</div>
    </li>
    <li id="Item 3">
        <div class="uk-card uk-card-default uk-card-hover uk-card-body">Item 3</div>
    </li>
    <li id="Item 4">
        <div class="uk-card uk-card-default uk-card-hover uk-card-body">Item 4</div>
    </li>
    <li id="Item 5">
        <div class="uk-card uk-card-default uk-card-hover uk-card-body">Item 5</div>
    </li>
    <li id="Item 6">
        <div class="uk-card uk-card-default uk-card-hover uk-card-body">Item 6</div>
    </li>
    <li id="Item 7">
        <div class="uk-card uk-card-default uk-card-hover uk-card-body">Item 7</div>
    </li>
    <li id="Item 8">
        <div class="uk-card uk-card-default uk-card-hover uk-card-body">Item 8</div>
    </li>
</ul>
	</div
</div

script.js

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

scripts

<script src="https://use.fontawesome.com/releases/v5.0.9/js/all.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.42/js/uikit.js"></script>

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.42/css/uikit.css" rel="stylesheet" />

uikit-3-sortable-test.markdown

UIKit 3 Sortable Test

A Pen by Rangka Kacang on CodePen.

License.