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.
Swappable Example
Wrap draggable zone with
.draggable-zoneand define draggable elements with
.draggableand let drag & drop through
.draggable-handleelement.Container A
Card 1
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Card 2
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Card 3
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Container B
Card 4
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Card 5
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Card 6
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Container C
Card 7
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Card 6
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
var containers = document.querySelectorAll(".draggable-zone");
if (containers.length === 0) {
return false;
}
var swappable = new Swappable.default(containers, {
draggable: ".draggable",
handle: ".draggable .draggable-handle",
mirror: {
//appendTo: selector,
appendTo: "body",
constrainDimensions: true
}
});
<div class="row row-cols-lg-3 g-10">
<!--begin::Col-->
<div class="col">
<!--begin::Card-->
<div class="card card-bordered mb-10">
<!--begin::Card header-->
<div class="card-header">
<div class="card-title">
<h3 class="card-label">Container A</h3>
</div>
</div>
<!--end::Card header-->
<!--begin::Card body-->
<div class="card-body">
<!--begin::Row-->
<div class="row row-cols-1 g-10 draggable-zone">
<!--begin::Col-->
<div class="col draggable">
<!--begin::Card-->
<div class="card bg-light-primary">
...
</div>
<!--end::Card-->
</div>
<!--begin::Col-->
<!--end::Col-->
<div class="col draggable">
<!--begin::Card-->
<div class="card bg-light-primary">
...
</div>
<!--end::Card-->
</div>
<!--begin::Col-->
<!--end::Col-->
<div class="col draggable">
<!--begin::Card-->
<div class="card bg-light-primary">
...
</div>
<!--end::Card-->
</div>
<!--end::Col-->
</div>
<!--end::Row-->
</div>
<!--end::Card body-->
</div>
<!--end::Card-->
</div>
<!--end::Col-->
<!--begin::Col-->
<div class="col">
<!--begin::Card-->
<div class="card card-bordered">
<!--begin::Card header-->
<div class="card-header">
<div class="card-title">
<h3 class="card-label">Container B</h3>
</div>
</div>
<!--end::Card header-->
<!--begin::Card body-->
<div class="card-body">
<!--begin::Row-->
<div class="row row-cols-1 g-10 draggable-zone">
<!--begin::Col-->
<div class="col draggable">
<!--begin::Card-->
<div class="card bg-light-success">
...
</div>
<!--end::Card-->
</div>
<!--end::Col-->
<!--begin::Col-->
<div class="col draggable">
<!--begin::Card-->
<div class="card bg-light-success">
<div class="card-header">
<div class="card-title">
<h3 class="card-label">Card 5</h3>
</div>
<div class="card-toolbar">
<a href="#" class="btn btn-icon btn-hover-light-primary draggable-handle">
<?php echo Theme::getIcon("abstract-14", "fs-2x"); ?>
</a>
</div>
</div>
<div class="card-body">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
</div>
<!--end::Card-->
</div>
<!--end::Col-->
<!--begin::Col-->
<div class="col draggable">
<!--begin::Card-->
<div class="card bg-light-success">
...
</div>
<!--end::Card-->
</div>
<!--end::Col-->
</div>
<!--end::Row-->
</div>
<!--end::Card body-->
</div>
<!--end::Card-->
</div>
<!--end::Col-->
<!--begin::Col-->
<div class="col">
<!--begin::Card-->
<div class="card card-bordered">
<!--begin::Card header-->
<div class="card-header">
<div class="card-title">
<h3 class="card-label">Container C</h3>
</div>
</div>
<!--end::Card header-->
<!--begin::Card body-->
<div class="card-body">
<!--begin::Row-->
<div class="row row-cols-1 g-10 draggable-zone">
<!--begin::Col-->
<div class="col draggable">
<!--begin::Card-->
<div class="card bg-light-danger">
...
</div>
<!--end::Card-->
</div>
<!--end::Col-->
<!--begin::Col-->
<div class="col draggable">
<!--begin::Card-->
<div class="card bg-light-danger">
...
</div>
<!--end::Card-->
</div>
<!--end::Col-->
</div>
<!--end::Row-->
</div>
<!--end::Card body-->
</div>
<!--end::Card-->
</div>
<!--end::Col-->
</div>
2024©
Keenthemes
