Documentation v8.1.1

Preview Downloads Purchase

Draggable is a lightweight, responsive, modern drag & drop library. Draggable abstracts native browser events into a comprehensive API to create a custom drag and drop experience. For more info see the official siteand the Github repository.

Draggable Cards Example

Wrap draggable zone with .draggable-zoneand define draggable elements with .draggableand let drag & drop through .draggable-handleelement.

Card 1

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled. Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Card 2

Card 3

Card 4

Card 5

Card 6

Card 7

Card 8

Card 9

var containers = document.querySelectorAll(".draggable-zone");

if (containers.length === 0) {
    return false;
}

var swappable = new Sortable.default(containers, {
    draggable: ".draggable",
    handle: ".draggable .draggable-handle",
    mirror: {
        //appendTo: selector,
        appendTo: "body",
        constrainDimensions: true
    }
});

<div class="row row-cols-lg-2 g-10 draggable-zone">
    <div class="col draggable">
        <!--begin::Card-->
        <div class="card card-bordered">
            ...
        </div>
        <!--end::Card-->
    </div>

    <div class="col draggable">
        <!--begin::Card-->
        <div class="card card-bordered">
            ...
        </div>
        <!--end::Card-->
    </div>

    <div class="col draggable">
        <!--begin::Card-->
        <div class="card card-bordered">
            ...
        </div>
        <!--end::Card-->
    </div>

    <div class="col draggable">
        <!--begin::Card-->
        <div class="card card-bordered">
            ...
        </div>
        <!--end::Card-->
    </div>

    <div class="col draggable">
        <!--begin::Card-->
        <div class="card card-bordered">
            ...
        </div>
        <!--end::Card-->
    </div>

    <div class="col draggable">
        <!--begin::Card-->
        <div class="card card-bordered">
            ...
        </div>
        <!--end::Card-->
    </div>

    <div class="col draggable">
        <!--begin::Card-->
        <div class="card card-bordered">
            ...
        </div>
        <!--end::Card-->
    </div>

    <div class="col draggable">
        <!--begin::Card-->
        <div class="card card-bordered">
            ...
        </div>
        <!--end::Card-->
    </div>

    <div class="col draggable">
        <!--begin::Card-->
        <div class="card card-bordered">
            ...
        </div>
        <!--end::Card-->
    </div>

    <div class="col draggable">
        <!--begin::Card-->
        <div class="card card-bordered">
            ...
        </div>
        <!--end::Card-->
    </div>
</div>