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.

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
Right list container
  • James Alexander
    Far jauntily manta laughed pugnacious hey hey ouch globefish far yikes crud overheard far off
    Colleague
  • Margo Baker
    Away one gosh gracefully tenably hid amid far overlay ouch oh until oyster crud much in far far
    Partner
  • Vanessa Aurelius
    Bled wept across mindful constructively suggestive hello fuzzily this jocosely capybara well to
    Client
  • Zachary Willson
    Dragonfly oversold forgot ouch less darn firefly one while honey until cockatoo more as the rat
    Investor
  • Benjamin Loretti
    Hello some plentiful a beneath much glanced that savage pending dashingly and hare insane dull
    Office
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.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch.
Тon cupidatat skateboard dolor brunch. Тesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda.
3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch.
Тon cupidatat skateboard dolor brunch. Тesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda.
3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it.
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
Highlight top border of the active tab by adding .nav-tabs-highlight class.
Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid laeggin.
DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg whatever.
Aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthet.
Colored tabs
In colored tabs .nav-tabs-component class rounds tabs container and first tab corners.
Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid laeggin.
DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg whatever.
Aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthet.
Justified tabs
To use in tabs with equal widths add .nav-justified .nav-tabs-highlight classes.
Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid laeggin.
DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg whatever.
Aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthet.
Colored justified
For justified tabs use .nav-justified .bg-* .nav-tabs-component classes.
Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid laeggin.
DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg whatever.
Aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthet.
Basic pills
Basic pills example using .nav-pills class. Also requires base .nav class.
Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid laeggin.
DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg whatever.
Aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthet.
Pills toolbar
Display pills as a toolbar with .nav-pills-toolbar .nav-pills-bordered classes.
Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid laeggin.
DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg whatever.
Aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthet.
Justified pills
Easily make pills equal widths of their parent with .nav-justified class.
Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid laeggin.
DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg whatever.
Aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthet.
Toolbar justified
To use in pills with equal widths add .nav-justified .nav-pills-toolbar .nav-pills-bordered classes.
Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid laeggin.
DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg whatever.
Aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthet.