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 symtomps 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 rounded-soft py-3 mb-3" style="max-height: none;">
      <div class="card mb-3 kanban-item shadow-sm">
        <div class="card-body">
          <p class="fs--1 font-weight-medium text-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">
        <div class="card-body">
          <p class="fs--1 font-weight-medium text-sans-serif mb-0">Add a pdf file that describes all the symtomps of COVID-19</p>
        </div>
      </div>
      <div class="card mb-3 kanban-item shadow-sm">
        <div class="card-body">
          <p class="fs--1 font-weight-medium text-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">
        <div class="card-body">
          <p class="fs--1 font-weight-medium text-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 rounded-soft py-3 mb-3" style="max-height: none;">
      <div class="card mb-3 kanban-item shadow-sm">
        <div class="card-body">
          <p class="fs--1 font-weight-medium text-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">
        <div class="card-body">
          <p class="fs--1 font-weight-medium text-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">
        <div class="card-body">
          <p class="fs--1 font-weight-medium text-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">
        <div class="card-body">
          <p class="fs--1 font-weight-medium text-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="assets/lib/shopify-draggable/draggable.bundle.legacy.js"></script>

Thank you for creating with Falcon |
2021 © Themewagon

v2.8.2