uikit
Version:
UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces.
301 lines (270 loc) • 14.8 kB
HTML
<html lang="en-gb" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sortable - UIkit tests</title>
<script src="js/test.js"></script>
<style>
.test-item {
font-size: 0.875rem;
}
</style>
<script>
const {on, ready} = UIkit.util;
ready(() =>
on(document.body, 'start moved added removed stop', (e, sortable, el) =>
console.log(e.type, sortable, el)
)
);
</script>
</head>
<body>
<div class="uk-container">
<h1>Sortable</h1>
<h2>Grid</h2>
<ul class="uk-grid-match uk-child-width-1-2 uk-child-width-1-5@m" uk-sortable="handle: .uk-card" uk-grid>
<li>
<div class="uk-card uk-card-default uk-card-body">
<a href="https://getuikit.com">Link</a>
<img src="images/avatar.jpg" width="40" height="40" alt="">
</div>
</li>
<li><a class="uk-card uk-card-default uk-card-body uk-display-block" href="https://getuikit.com">Link Handle</a></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>
<li><div class="uk-card uk-card-default uk-card-body">Item 9</div></li>
<li><div class="uk-card uk-card-default uk-card-body">Item 10</div></li>
<li><div class="uk-card uk-card-default uk-card-body">Item 11</div></li>
<li><div class="uk-card uk-card-default uk-card-body">Item 12</div></li>
</ul>
<div class="uk-grid uk-child-width-1-3">
<div>
<h2>Group</h2>
<div uk-sortable="group: test">
<div class="uk-margin">
<div class="uk-card uk-card-default uk-card-body uk-card-small">Item 1</div>
</div>
<div class="uk-margin">
<div class="uk-card uk-card-default uk-card-body uk-card-small">Item 2</div>
</div>
<div class="uk-margin">
<div class="uk-card uk-card-default uk-card-body uk-card-small">Item 3</div>
</div>
<div class="uk-margin">
<div class="uk-card uk-card-default uk-card-body uk-card-small">Item 4</div>
</div>
<div class="uk-margin">
<div class="uk-card uk-card-default uk-card-body uk-card-small">Item 5</div>
</div>
</div>
</div>
<div>
<h2>Handle</h2>
<div uk-sortable="handle: .uk-sortable-handle; group: test">
<div class="uk-margin">
<div class="uk-card uk-card-default uk-card-body uk-card-small">
<span class="uk-sortable-handle uk-margin-xsmall-right" uk-icon="icon: table"></span> Item 1
</div>
</div>
<div class="uk-margin">
<div class="uk-card uk-card-default uk-card-body uk-card-small">
<span class="uk-sortable-handle uk-margin-xsmall-right" uk-icon="icon: table"></span> Item 2
</div>
</div>
<div class="uk-margin">
<div class="uk-card uk-card-default uk-card-body uk-card-small">
<span class="uk-sortable-handle uk-margin-xsmall-right" uk-icon="icon: table"></span> Item 3
</div>
</div>
<div class="uk-margin">
<div class="uk-card uk-card-default uk-card-body uk-card-small">
<span class="uk-sortable-handle uk-margin-xsmall-right" uk-icon="icon: table"></span> Item 4
</div>
</div>
<div class="uk-margin">
<div class="uk-card uk-card-default uk-card-body uk-card-small">
<span class="uk-sortable-handle uk-margin-xsmall-right" uk-icon="icon: table"></span> Item 5
</div>
</div>
</div>
</div>
<div>
<h2>Empty</h2>
<div uk-sortable="group: test"></div>
</div>
</div>
<h2>Nav + Custom Drag Class</h2>
<ul class="uk-nav uk-nav-default uk-width-1-4@m" uk-sortable="cls-custom: test-item uk-box-shadow-small uk-link-muted uk-flex uk-flex-middle uk-background-default">
<li class="uk-active"><a href="#">Active</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
</ul>
<h2>Nested Lists</h2>
<ul class="uk-grid-small uk-grid-match uk-child-width-1-2@m" uk-sortable="group: first" uk-grid>
<li><div class="uk-card uk-card-default uk-padding-small">
<ul class="uk-grid-match uk-child-width-1-3" uk-sortable="group: second" uk-grid>
<li><div class="uk-card uk-card-secondary uk-padding-small">
<ul class="uk-grid-small uk-grid-match uk-child-width-1-1" uk-sortable="group: third" uk-grid>
<li><div class="uk-card uk-card-primary uk-padding-small">Item 1</div></li>
<li><div class="uk-card uk-card-primary uk-padding-small">Item 2</div></li>
<li><div class="uk-card uk-card-primary uk-padding-small">Item 3</div></li>
</ul>
</div></li>
<li><div class="uk-card uk-card-secondary uk-padding-small">
<ul class="uk-grid-small uk-grid-match uk-child-width-1-1" uk-sortable="group: third" uk-grid>
<li><div class="uk-card uk-card-primary uk-padding-small">Item 4</div></li>
<li><div class="uk-card uk-card-primary uk-padding-small">Item 5</div></li>
</ul>
</div></li>
<li><div class="uk-card uk-card-secondary uk-padding-small">
<ul class="uk-grid-small uk-grid-match uk-child-width-1-1" uk-sortable="group: third" uk-grid>
</ul>
</div></li>
</ul>
</div></li>
<li><div class="uk-card uk-card-default uk-padding-small">
<ul class="uk-grid-match uk-child-width-1-3" uk-sortable="group: second" uk-grid>
<li><div class="uk-card uk-card-secondary uk-padding-small">
<ul class="uk-grid-small uk-grid-match uk-child-width-1-1" uk-sortable="group: third" uk-grid>
<li><div class="uk-card uk-card-primary uk-padding-small">Item 6</div></li>
<li><div class="uk-card uk-card-primary uk-padding-small">Item 7</div></li>
</ul>
</div></li>
<li><div class="uk-card uk-card-secondary uk-padding-small">
<ul class="uk-grid-small uk-grid-match uk-child-width-1-1" uk-sortable="group: third" uk-grid>
<li><div class="uk-card uk-card-primary uk-padding-small">Item 8</div></li>
<li><div class="uk-card uk-card-primary uk-padding-small">Item 9</div></li>
</ul>
</div></li>
<li><div class="uk-card uk-card-secondary uk-padding-small">
<ul class="uk-grid-small uk-grid-match uk-child-width-1-1" uk-sortable="group: third" uk-grid>
</ul>
</div></li>
</ul>
</div></li>
<li><div class="uk-card uk-card-default uk-padding-small">
<ul class="uk-grid-match uk-child-width-1-3" uk-sortable="group: second" uk-grid>
<li><div class="uk-card uk-card-secondary uk-padding-small">
<ul class="uk-grid-small uk-grid-match uk-child-width-1-1" uk-sortable="group: third" uk-grid>
<li><div class="uk-card uk-card-primary uk-padding-small">Item 10</div></li>
</ul>
</div></li>
<li><div class="uk-card uk-card-secondary uk-padding-small">
<ul class="uk-grid-small uk-grid-match uk-child-width-1-1" uk-sortable="group: third" uk-grid>
<li><div class="uk-card uk-card-primary uk-padding-small">Item 11</div></li>
</ul>
</div></li>
<li><div class="uk-card uk-card-secondary uk-padding-small">
<ul class="uk-grid-small uk-grid-match uk-child-width-1-1" uk-sortable="group: third" uk-grid>
</ul>
</div></li>
</ul>
</div></li>
</ul>
<h2>JavaScript Options</h2>
<div class="uk-overflow-auto">
<table class="uk-table uk-table-striped">
<thead>
<tr>
<th>Option</th>
<th>Value</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>group</code></td>
<td>String</td>
<td></td>
<td>The group</td>
</tr>
<tr>
<td><code>animation</code></td>
<td>String, Boolean</td>
<td>slide</td>
<td>Animation mode (slide, fade, delayed-fade, false).</td>
</tr>
<tr>
<td><code>duration</code></td>
<td>Number</td>
<td>250</td>
<td>Animation duration in milliseconds.</td>
</tr>
<tr>
<td><code>threshold</code></td>
<td>Number</td>
<td>10</td>
<td>Mouse move threshold before dragging starts.</td>
</tr>
<tr>
<td><code>cls-item</code></td>
<td>String</td>
<td>uk-sortable-item</td>
<td>The item class.</td>
</tr>
<tr>
<td><code>cls-placeholder</code></td>
<td>String</td>
<td>uk-sortable-placeholder</td>
<td>The placeholder class.</td>
</tr>
<tr>
<td><code>cls-drag</code></td>
<td>String</td>
<td>uk-sortable-drag</td>
<td>The ghost class.</td>
</tr>
<tr>
<td><code>cls-drag-state</code></td>
<td>String</td>
<td>uk-sortable-dragging</td>
<td>The body's dragging class.</td>
</tr>
<tr>
<td><code>cls-base</code></td>
<td>String</td>
<td>uk-sortable</td>
<td>The list's class.</td>
</tr>
<tr>
<td><code>cls-no-drag</code></td>
<td>String</td>
<td>uk-sortable-nodrag</td>
<td>Prevent dragging on elements with this class.</td>
</tr>
<tr>
<td><code>cls-empty</code></td>
<td>String</td>
<td>uk-sortable-empty</td>
<td>The empty list class.</td>
</tr>
<tr>
<td><code>cls-custom</code></td>
<td>String</td>
<td></td>
<td>The ghost's custom class.</td>
</tr>
<tr>
<td><code>handle</code></td>
<td>String</td>
<td>false</td>
<td>The handle selector.</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>