Shopify Draggable Plugin, a modern drag and drop JavaScript library.
.draggable-zoneand define draggable elements with
.draggableand let drag & drop through
.draggable-handleelement.
<!-- 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();
});
