Logo
Wrap draggable zone with .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();
                            });
                        

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.

User Profile 12 messages

James Jones
Application Developer
Recent Notifications
Another purpose persuade Due in 2 Days
+28%
Would be to people Due in 2 Days
+50%
-27%
The best product Due in 2 Days
+8%

Select A Demo