Draggable Cards
Draggable Cards powered with
For more info please check out the official documentation.
Shopify Draggable Plugin, a modern drag and drop JavaScript library.
For more info please check out the official documentation.
Wrap draggable zone with
.draggable-zone and define draggable elements with .draggable and let drag & drop through .draggable-handle element.
<!-- used-->
<script src="assets/plugins/custom/draggable/draggable.bundle.js" type="text/javascript"></script>
<div class="row">
<div class="col-lg-6 draggable-zone">
<!--begin::Card-->
<div class="card card-custom gutter-b draggable">
<div class="card-header">
<div class="card-title">
<h3 class="card-label">Card 1 </h3>
</div>
<div class="card-toolbar">
<a href="#" class="btn btn-icon btn-sm btn-hover-light-primary draggable-handle">
<i class="ki ki-menu "></i>
</a>
</div>
</div>
<div class="card-body">
...
</div>
</div>
<!--end::Card-->
<!--begin::Card-->
<div class="card card-custom gutter-b draggable">
<div class="card-header">
<div class="card-title">
<h3 class="card-label">Card 2</h3>
</div>
<div class="card-toolbar">
<a href="#" class="btn btn-icon btn-hover-light-primary draggable-handle">
<i class="ki ki-menu "></i>
</a>
</div>
</div>
<div class="card-body">
...
</div>
</div>
<!--end::Card-->
<!--begin::Card-->
<div class="card card-custom gutter-b draggable">
<div class="card-header">
<div class="card-title">
<h3 class="card-label">Card 3</h3>
</div>
<div class="card-toolbar">
<a href="#" class="btn btn-icon btn-hover-light-primary draggable-handle">
<i class="ki ki-menu "></i>
</a>
</div>
</div>
<div class="card-body">
...
</div>
</div>
<!--end::Card-->
<!--begin::Card-->
<div class="card card-custom gutter-b draggable">
<div class="card-header">
<div class="card-title">
<h3 class="card-label">Card 4</h3>
</div>
<div class="card-toolbar">
<a href="#" class="btn btn-icon btn-hover-light-primary draggable-handle">
<i class="ki ki-menu "></i>
</a>
</div>
</div>
<div class="card-body">
...
</div>
</div>
<!--end::Card-->
<!--begin::Card-->
<div class="card card-custom gutter-b draggable">
<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">
<i class="ki ki-menu "></i>
</a>
</div>
</div>
<div class="card-body">
...
</div>
</div>
<!--end::Card-->
</div>
<div class="col-lg-6 draggable-zone">
<!--begin::Card-->
<div class="card card-custom gutter-b draggable">
<div class="card-header">
<div class="card-title">
<h3 class="card-label">Card 6</h3>
</div>
<div class="card-toolbar">
<a href="#" class="btn btn-icon btn-hover-light-primary draggable-handle">
<i class="ki ki-menu "></i>
</a>
</div>
</div>
<div class="card-body">
...
</div>
</div>
<!--end::Card-->
<!--begin::Card-->
<div class="card card-custom gutter-b draggable">
<div class="card-header">
<div class="card-title">
<h3 class="card-label">Card 7</h3>
</div>
<div class="card-toolbar">
<a href="#" class="btn btn-icon btn-hover-light-primary draggable-handle">
<i class="ki ki-menu "></i>
</a>
</div>
</div>
<div class="card-body">
...
</div>
</div>
<!--end::Card-->
<!--begin::Card-->
<div class="card card-custom gutter-b draggable">
<div class="card-header">
<div class="card-title">
<h3 class="card-label">Card 8</h3>
</div>
<div class="card-toolbar">
<a href="#" class="btn btn-icon btn-hover-light-primary draggable-handle">
<i class="ki ki-menu "></i>
</a>
</div>
</div>
<div class="card-body">
...
</div>
</div>
<!--end::Card-->
<!--begin::Card-->
<div class="card card-custom gutter-b draggable">
<div class="card-header">
<div class="card-title">
<h3 class="card-label">Card 9</h3>
</div>
<div class="card-toolbar">
<a href="#" class="btn btn-icon btn-hover-light-primary draggable-handle">
<i class="ki ki-menu "></i>
</a>
</div>
</div>
<div class="card-body">
...
</div>
</div>
<!--end::Card-->
<!--begin::Card-->
<div class="card card-custom gutter-b draggable">
<div class="card-header">
<div class="card-title">
<h3 class="card-label">Card 10</h3>
</div>
<div class="card-toolbar">
<a href="#" class="btn btn-icon btn-hover-light-primary draggable-handle">
<i class="ki ki-menu "></i>
</a>
</div>
</div>
<div class="card-body">
...
</div>
</div>
<!--end::Card-->
</div>
</div>
var KTCardDraggable = function () {
return {
//main function to initiate the module
init: function () {
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: 'body',
constrainDimensions: true
}
});
}
};
}();
jQuery(document).ready(function () {
KTCardDraggable.init();
});
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.
Card 4
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 5
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 6
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 7
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 8
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 9
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 10
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.
