#### Extensions - Drag and Drop

Statistics Invoices Schedule

###### 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

Enter your name:
Enter your password:
Attach screenshot:
Your message:

###### Right form container

Full name:
Your email:
Country:
State/Province:
ZIP code:
City:
Address line:
Additional message:

###### 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 Smith
  One preparatory festive outran blatantly indecisively interminable bid popular much and less
- Bastian Miller
  As ouch lizard hurried less ingenuously malicious yikes belched agilely shrank more diabolically
- Jordana Mills
  Kiwi that dear because wow barring dear temperate narrowly securely indecently this persistently
- Freddy Walden
  Impotently much wedded within truly amidst therefore toward as as insect pre-set where foolhardily
- William Miles
  Strangely mounted the and as however repaid wow goodness oh falcon unproductive and some bred

###### 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.

###### Accordion Item #1

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch.

###### Accordion Item #2

Т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.

###### Accordion Item #3

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.

###### Collapsible Item #1

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch.

###### Collapsible Item #2

Т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.

###### Collapsible Item #3

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.