Dragula extension
Dragula - drag and drop library, that adds sortable functionality to any elements without any specific requirements and settings.Sorting menu items
The following examples demonstrate how dropdown menu items can be sorting. This is the default use case, all you need is to specify dropdown menu id if single menu or class if multiple menus, also set the element that gets mirror elements appended using mirrorContainer option. All menu functionality works until drag starts - all links are clickable, all submenus are toggling. Examples below include basic use cases and components.
Default items sorting
Basic example of menu items sorting
Menu with submenus
Parent level of submenu is also sortable
Menu components
All menu components are supported
Draggable form components
The following example demonstrates how form components can be draggable/sortable. Form components are placed inside 2 columns, that are connected in plugin configuration. Draggable functionality is attached to <div class="form-group" /> container - you can easily sort rows inside each column or drag/drop rows from one column to another. All elements inside form groups are working until drag starts. Works with all form layouts.
Left form container
Right form container
Sortable media list
The following examples demonstrate sorting feature added to simple media lists. The functionality is the same as in other examples, but here we've added custom handle to each media list and set container, that gets elements appended using mirrorContainer option to keep it inside list - by default, all draggable elements are appended to body. You can also move items between 2 or more columns, copy them on dragging or remove original item when drag is completed.
Left list container
-
Monica SmithOne preparatory festive outran blatantly indecisively interminable bid popular much and less -
Bastian MillerAs ouch lizard hurried less ingenuously malicious yikes belched agilely shrank more diabolically
-
Jordana MillsKiwi that dear because wow barring dear temperate narrowly securely indecently this persistently
-
Freddy WaldenImpotently much wedded within truly amidst therefore toward as as insect pre-set where foolhardily
-
William MilesStrangely mounted the and as however repaid wow goodness oh falcon unproductive and some bred
Right list container
-
James AlexanderFar jauntily manta laughed pugnacious hey hey ouch globefish far yikes crud overheard far offColleague
-
Margo BakerAway one gosh gracefully tenably hid amid far overlay ouch oh until oyster crud much in far farPartner
-
Vanessa AureliusBled wept across mindful constructively suggestive hello fuzzily this jocosely capybara well toClient
-
Zachary WillsonDragonfly oversold forgot ouch less darn firefly one while honey until cockatoo more as the ratInvestor
-
Benjamin LorettiHello some plentiful a beneath much glanced that savage pending dashingly and hare insane dullOffice
Draggable cards
The following examples demonstrate how content cards can be dragged around. Just like jQuery UI Sortable examples, this sorting library does the same, but it doesn't require that much styling. In these examples the whole card is a handle, but you can also specify a custom dragging handle such as control icon on the top right corner. All links in tables are clickable and card control functionality (collapsing/expanding, reloading and closing) still works until drag starts.
Draggable card #1
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | James | Lorry | @jimmylorry |
| Chris | Ludacris | @cluda | |
| 2 | Jacob | Williams | @jacwill |
| 3 | Martin Cooper | @marcoop | |
Draggable card #3
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | James | Lorry | @jimmylorry |
| Chris | Ludacris | @cluda | |
| 2 | Jacob | Williams | @jacwill |
| 3 | Martin Cooper | @marcoop | |
Draggable card #2
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | James | Lorry | @jimmylorry |
| Chris | Ludacris | @cluda | |
| 2 | Jacob | Williams | @jacwill |
| 3 | Martin Cooper | @marcoop | |
Draggable card #4
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | James | Lorry | @jimmylorry |
| Chris | Ludacris | @cluda | |
| 2 | Jacob | Williams | @jacwill |
| 3 | Martin Cooper | @marcoop | |
Sorting collapsible cards
The following examples demonstrate sorting feature added to the set of cards with accordion and collapsible functionality. Here handles are not specified and the whole card is a draggable handle. Both sets are separated - you can sort cards in a single column only without dragging to another column. The functionality is pretty much the same, the only difference is we need to use the same id to define data-parent and sortable container for accordion.
Sortable tabs and pills
The following examples demonstrate sorting feature added to the tab and pill navigation types. Dragula functionality can be added to all available tabs and pills layouts and supports all available options. In these examples each nav type has a single container where dragging is allowed, because this is related to nav item position, tab content stays in its original container. In most cases we need to set the element that gets elements appended using mirrorContainer option. In our case it's an id added to the tabs/pills nav.
Basic tabs
.nav-tabs-highlight class.
Colored tabs
.nav-tabs-component class rounds tabs container and first tab corners.
Justified tabs
.nav-justified .nav-tabs-highlight classes.
Colored justified
.nav-justified .bg-* .nav-tabs-component classes.
Basic pills
.nav-pills class. Also requires base .nav class.
Pills toolbar
.nav-pills-toolbar .nav-pills-bordered classes.
Justified pills
.nav-justified class.
Toolbar justified
.nav-justified .nav-pills-toolbar .nav-pills-bordered classes.