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.

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="mb-3" /> input wrapper 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.

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.

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.

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.

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.