Drag & Drop (Dragula)

Drag and drop so simple it hurts

How to use

Simply add the data-sortable attribute to an element to easily drag and drop all the element's children in the next level. You can also define other settings with the data-sortable-options attribute.

By using code splitting and dynamic import techniques you don't need to worry about the size of the JavaScript file. Dashly will only import the necessary files when they are needed.

Basic example

Let's try with a simple list group.

A simple default list group item
A simple primary list group item
A simple secondary list group item
A simple success list group item
A simple danger list group item
A simple warning list group item
A simple info list group item
A simple light list group item
A simple dark list group item

<ul class="list-group" data-sortable>
    <li class="list-group-item">A simple default list group item</li>
    <li class="list-group-item list-group-item-primary">A simple primary list group item</li>
    <li class="list-group-item list-group-item-secondary">A simple secondary list group item</li>
    <li class="list-group-item list-group-item-success">A simple success list group item</li>
    <li class="list-group-item list-group-item-danger">A simple danger list group item</li>
    <li class="list-group-item list-group-item-warning">A simple warning list group item</li>
    <li class="list-group-item list-group-item-info">A simple info list group item</li>
    <li class="list-group-item list-group-item-light">A simple light list group item</li>
    <li class="list-group-item list-group-item-dark">A simple dark list group item</li>
</ul>

Different child elements

Add the id's of the parent elements you want to drag and drop. They can be anywhere. Use data-sortable='["list-1", "list-2"]'.

An item
A second item
A third item
A fourth item
And a fifth one

An item
A second item
A third item
A fourth item
And a fifth one

<div class="row" data-sortable='["list-1", "list-2"]'>
    <div class="col">
        <ul class="list-group" id="list-1">
            <li class="list-group-item list-group-item-primary">An item</li>
            <li class="list-group-item list-group-item-primary">A second item</li>
            <li class="list-group-item list-group-item-primary">A third item</li>
            <li class="list-group-item list-group-item-primary">A fourth item</li>
            <li class="list-group-item list-group-item-primary">And a fifth one</li>
        </ul>
    </div>

    <div class="col">
        <ul class="list-group" id="list-2">
            <li class="list-group-item list-group-item-secondary">An item</li>
            <li class="list-group-item list-group-item-secondary">A second item</li>
            <li class="list-group-item list-group-item-secondary">A third item</li>
            <li class="list-group-item list-group-item-secondary">A fourth item</li>
            <li class="list-group-item list-group-item-secondary">And a fifth one</li>
        </ul>
    </div>
</div>

Copy elements

You can even copy elemets by using data-sortable-options='{"copy": true}' attribute.

An item
A second item
A third item
A fourth item
And a fifth one

An item
A second item
A third item
A fourth item
And a fifth one

<div class="row" data-sortable='["list-3", "list-4"]' data-sortable-options='{"copy": true}'>
    <div class="col">
        <ul class="list-group" id="list-3">
            <li class="list-group-item list-group-item-primary">An item</li>
            <li class="list-group-item list-group-item-primary">A second item</li>
            <li class="list-group-item list-group-item-primary">A third item</li>
            <li class="list-group-item list-group-item-primary">A fourth item</li>
            <li class="list-group-item list-group-item-primary">And a fifth one</li>
        </ul>
    </div>

    <div class="col">
        <ul class="list-group" id="list-4">
            <li class="list-group-item list-group-item-secondary">An item</li>
            <li class="list-group-item list-group-item-secondary">A second item</li>
            <li class="list-group-item list-group-item-secondary">A third item</li>
            <li class="list-group-item list-group-item-secondary">A fourth item</li>
            <li class="list-group-item list-group-item-secondary">And a fifth one</li>
        </ul>
    </div>
</div>