Dragula extensionDragula - 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
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
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
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.
.nav-tabs-componentclass rounds tabs container and first tab corners.
.nav-justified .bg-* .nav-tabs-componentclasses.
.nav-pillsclass. Also requires base
.nav-justified .nav-pills-toolbar .nav-pills-borderedclasses.