Shopify Draggable Plugin, a modern drag and drop JavaScript library.
.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();
});
Lorem Ipsum is simply dummy text of the printing and industry.
There are many variations of passages of Lorem Ipsum available.
Contrary to popular belief, Lorem Ipsum is not simply random text.
If you are going to use a passage of Lorem Ipsum, you need.
To start a blog, think of a topic about and first brainstorm ways to write details
To start a blog, think of a topic about and first brainstorm ways to write details
To start a blog, think of a topic about and first brainstorm ways to write details
To start a blog, think of a topic about and first brainstorm ways to write details
