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 over Multiple Containers Example
Wrap draggable zone with
.min-h-200px 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. 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
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 3
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.
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(".min-h-200px 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
}
});
<!--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-lg-3 g-10 min-h-200px 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-->
<!--begin::Row-->
<div class="row row-cols-lg-2 g-10">
<!--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 min-h-200px 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>
<!--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 min-h-200px 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>
<!--end::Row-->
2021©
Md Abdul Momin
