Logo

Projects

Bravio Application By James
Quick Reports By Ana
CRM Reporting Tool By Adam
DB Management By CRA Team
Cloud Service By iC Team
Disqus Project By PV Inc.
Plurk Meeting By Plurk Team.
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.

Quick Actions finance & reports

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