How to use the uikit.sortable function in uikit
To help you get started, we’ve selected a few uikit examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
polonel / trudesk / src / client / components / Settings / Menu / index.jsx View on Github 
componentDidMount () {
if (this.props.draggable) {
const menu = $(this.menu)
this.menuSortable = UIkit.sortable(menu, {
handleClass: 'drag-handle'
})
if (this.props.onMenuDrag) this.menuSortable.on('change.uk.sortable', this.props.onMenuDrag)
}
}setTimeout(() => {
UIkit.sortable(this.$el.querySelector('.collection-wrapper'), {
handle: '.uk-sortable-handle',
animation: 300,
});
}, 100);
});componentDidUpdate () {
if (this.props.draggable && !this.menuSortable) {
const menu = $(this.menu)
this.menuSortable = UIkit.sortable(menu, {
handleClass: 'drag-handle'
})
if (this.props.onMenuDrag) this.menuSortable.on('change.uk.sortable', this.props.onMenuDrag)
}
}setTimeout(() => {
UIkit.sortable(this.$el, {
handle: '.uk-sortable-handle',
nestableContainerClass: 'unite-div-table-tbody',
nestable: true
});
UIkit.util.on(this.$el, 'moved', this.moved);
UIkit.util.on(this.$el, 'added', this.nest);
}, 100);
});mounted() {
if(this.isSortable && this.updateable) {
UIkit.sortable(this.$el.querySelector('.unite-div-table-tbody'), {
handle: '.uk-sortable-handle',
nestable: true
});
UIkit.util.on(this.$el, 'moved', this.moved);
}
},
updated() {mounted() {
if(this.isSortable && this.updateable) {
UIkit.sortable(this.$el.querySelector('.unite-div-table-tbody'), {
handle: '.uk-sortable-handle',
nestable: true
});
UIkit.util.on(this.$el, 'moved', this.moved);
}
},
updated() {uikit
UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces.
