Draggable

A lightweight, responsive, modern drag & drop library

Draggable Documentation
Example

Here is the example of the Multiple Container Sortable feature of the Draggable library. We also design Kanban Board using this Draggable Library. You can drag any card in between the two columns below:

Add a cookie notice which will be shown in the bottom of the page and have a link of "Privacy Policy"

Add a pdf file that describes all the symptoms of COVID-19

Make a Registration form that include Name, Email and a Password input field

Update profile page layout with cover image and user setting menu

Update all the npm packages and also remove the outdated plugins

Add a getting started page that allows users to see the starting process

Review and test all the task and deploy to the server

Get all the data by API call and show them to the landing page by adding a new section

<div class="row">
  <div class="col-lg-6">
    <div class="kanban-items-container border bg-white dark__bg-1000 rounded-2 py-3 mb-3" style="max-height: none;">
      <div class="card mb-3 kanban-item shadow-sm dark__bg-1100">
        <div class="card-body">
          <p class="fs--1 fw-medium font-sans-serif mb-0">Add a cookie notice which will be shown in the bottom of the page and have a link of &quot;Privacy Policy&quot;</p>
        </div>
      </div>
      <div class="card mb-3 kanban-item shadow-sm dark__bg-1100">
        <div class="card-body">
          <p class="fs--1 fw-medium font-sans-serif mb-0">Add a pdf file that describes all the symptoms of COVID-19</p>
        </div>
      </div>
      <div class="card mb-3 kanban-item shadow-sm dark__bg-1100">
        <div class="card-body">
          <p class="fs--1 fw-medium font-sans-serif mb-0">Make a Registration form that include Name, Email and a Password input field</p>
        </div>
      </div>
      <div class="card mb-3 kanban-item shadow-sm dark__bg-1100">
        <div class="card-body">
          <p class="fs--1 fw-medium font-sans-serif mb-0">Update profile page layout with cover image and user setting menu</p>
        </div>
      </div>
    </div>
  </div>
  <div class="col-lg-6">
    <div class="kanban-items-container border bg-white dark__bg-1000 rounded-2 py-3 mb-3" style="max-height: none;">
      <div class="card mb-3 kanban-item shadow-sm dark__bg-1100">
        <div class="card-body">
          <p class="fs--1 fw-medium font-sans-serif mb-0">Update all the npm packages and also remove the outdated plugins</p>
        </div>
      </div>
      <div class="card mb-3 kanban-item shadow-sm dark__bg-1100">
        <div class="card-body">
          <p class="fs--1 fw-medium font-sans-serif mb-0">Add a getting started page that allows users to see the starting process</p>
        </div>
      </div>
      <div class="card mb-3 kanban-item shadow-sm dark__bg-1100">
        <div class="card-body">
          <p class="fs--1 fw-medium font-sans-serif mb-0">Review and test all the task and deploy to the server</p>
        </div>
      </div>
      <div class="card mb-3 kanban-item shadow-sm dark__bg-1100">
        <div class="card-body">
          <p class="fs--1 fw-medium font-sans-serif mb-0">Get all the data by API call and show them to the landing page by adding a new section</p>
        </div>
      </div>
    </div>
  </div>
</div>
Javascript
<script src="vendors/draggable/draggable.bundle.legacy.js"></script>

Thank you for creating with Falcon |
2023 © Themewagon

v3.16.0

Settings

Set your own customized style

Color Scheme

Choose the perfect color mode for your app.


RTL Mode

Switch your language direction

RTL Documentation

Fluid Layout

Toggle container layout system

Fluid Documentation

Navigation Position

Select a suitable navigation system for your web application


Vertical Navbar Style

Switch between styles for your vertical navbar

See Documentation

Like What You See?

Get Falcon now and create beautiful dashboards with hundreds of widgets.

Purchase
customize