.draggable-zone و درگ کردن المنت ها.draggable .draggable-handle .
<!-- 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::کارت-->
<div class="card card-custom gutter-b draggable">
<div class="card-header">
<div class="card-title">
<h3 class="card-label">کارت 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::کارت-->
<!--begin::کارت-->
<div class="card card-custom gutter-b draggable">
<div class="card-header">
<div class="card-title">
<h3 class="card-label">کارت 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::کارت-->
<!--begin::کارت-->
<div class="card card-custom gutter-b draggable">
<div class="card-header">
<div class="card-title">
<h3 class="card-label">کارت 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::کارت-->
<!--begin::کارت-->
<div class="card card-custom gutter-b draggable">
<div class="card-header">
<div class="card-title">
<h3 class="card-label">کارت 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::کارت-->
<!--begin::کارت-->
<div class="card card-custom gutter-b draggable">
<div class="card-header">
<div class="card-title">
<h3 class="card-label">کارت 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::کارت-->
</div>
<div class="col-lg-6 draggable-zone">
<!--begin::کارت-->
<div class="card card-custom gutter-b draggable">
<div class="card-header">
<div class="card-title">
<h3 class="card-label">کارت 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::کارت-->
<!--begin::کارت-->
<div class="card card-custom gutter-b draggable">
<div class="card-header">
<div class="card-title">
<h3 class="card-label">کارت 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::کارت-->
<!--begin::کارت-->
<div class="card card-custom gutter-b draggable">
<div class="card-header">
<div class="card-title">
<h3 class="card-label">کارت 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::کارت-->
<!--begin::کارت-->
<div class="card card-custom gutter-b draggable">
<div class="card-header">
<div class="card-title">
<h3 class="card-label">کارت 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::کارت-->
<!--begin::کارت-->
<div class="card card-custom gutter-b draggable">
<div class="card-header">
<div class="card-title">
<h3 class="card-label">کارت 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::کارت-->
</div>
</div>
var KTکارتدرگ = function () {
return {
//main function to initiate the module
init: function () {
var containers = document.queryانتخابorهمه('.draggable-zone');
if (containers.length === 0) {
return false;
}
var swappable = new مرتب سازیable.default(containers, {
draggable: '.draggable',
handle: '.draggable .draggable-handle',
mirror: {
appendTo: 'body',
constrainDimensions: true
}
});
}
};
}();
jQuery(document).ready(function () {
KTکارتدرگ.init();
});
