Uses UIkit.mixin to add a nestable option to the uikit3 sortable component.
See this nestable plugin in action: DEMO.
yarn add uikit3-nestable
# or
npm install uikit3-nestable
import UIkit from 'uikit';
import nestable from 'uikit3-nestable';
// Add nestable as mixin to the sortable component.
UIkit.mixin(nestable, 'sortable');Include node_moduels/uikit3-nestable/dist/js/nestable.js after UIkit:
<link rel="stylesheet" href=".../uikit.min.css" />
<script src=".../uikit.min.js"></script>
<script src=".../uikit-icons.min.js"></script>
<script src="..../nestable.js"></script>>Now you have a new nestable option for your uk-sortable components:
<div uk-sortable="handle: .uk-sortable-handle; nestable: true"></div>In order to make nestable work, you must add at least the following css code:
/* nested sortable groups indention */
.uk-sortable .uk-sortable,
.uk-sortable-drag .uk-sortable {
margin-left: 50px;
}
/* nested sortable groups inner padding to the parent element */
.uk-sortable .uk-sortable:not(.uk-sortable-empty),
.uk-sortable .uk-sortable-drag:not(.uk-sortable-empty) {
padding-top: 20px;
}
/* remove uk-sortable-empty min-height sort nested sortables */
.uk-sortable .uk-sortable.uk-sortable-empty,
.uk-sortable-drag .uk-sortable.uk-sortable-empty {
min-height: 0;
}To make it easier to sort, you should make the placeholder visible. Something like this (taken from uikit2):
/* Custom placeholder styles, makes it easier to see the current position */
.uk-sortable-placeholder {
position: relative;
opacity: 1;
}
.uk-sortable-placeholder > * {
opacity: 0;
}
.uk-sortable-placeholder:after {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
border: 1px dashed #E5E5E5;
opacity: 1;
}A working example can be found in dist/index.html Please see dist/index.html
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent