### Sortable

Reorderable drag-and-drop lists for modern browsers and touch devices. No jQuery or framework required.

Sortable Documentation

##### Example

Here is the example of the Multiple Container Sortable feature of the library. We also design Kanban Board using this Sortable 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="border bg-white dark__bg-1000 rounded-2 p-3 mb-3" style="max-height: none;" data-sortable="data-sortable">
          <div class="sortable-item-wrapper dark__bg-1100 mb-3">
            <div class="sortable-item card shadow-sm">
              <div class="card-body">
                <p class="fs-10 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>
          <div class="sortable-item-wrapper dark__bg-1100 mb-3">
            <div class="sortable-item card shadow-sm">
              <div class="card-body">
                <p class="fs-10 fw-medium font-sans-serif mb-0">Add a pdf file that describes all the symptoms of COVID-19</p>
              </div>
            </div>
          </div>
          <div class="sortable-item-wrapper dark__bg-1100 mb-3">
            <div class="sortable-item card shadow-sm">
              <div class="card-body">
                <p class="fs-10 fw-medium font-sans-serif mb-0">Make a Registration form that include Name, Email and a Password input field</p>
              </div>
            </div>
          </div>
          <div class="sortable-item-wrapper dark__bg-1100 mb-3">
            <div class="sortable-item card shadow-sm">
              <div class="card-body">
                <p class="fs-10 fw-medium font-sans-serif mb-0">Update profile page layout with cover image and user setting menu</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-lg-6">
        <div class="border bg-white dark__bg-1000 rounded-2 p-3 mb-3" style="max-height: none;" data-sortable="data-sortable">
          <div class="sortable-item-wrapper dark__bg-1100 mb-3">
            <div class="sortable-item card shadow-sm">
              <div class="card-body">
                <p class="fs-10 fw-medium font-sans-serif mb-0">Update all the npm packages and also remove the outdated plugins</p>
              </div>
            </div>
          </div>
          <div class="sortable-item-wrapper dark__bg-1100 mb-3">
            <div class="sortable-item card shadow-sm">
              <div class="card-body">
                <p class="fs-10 fw-medium font-sans-serif mb-0">Add a getting started page that allows users to see the starting process</p>
              </div>
            </div>
          </div>
          <div class="sortable-item-wrapper dark__bg-1100 mb-3">
            <div class="sortable-item card shadow-sm">
              <div class="card-body">
                <p class="fs-10 fw-medium font-sans-serif mb-0">Review and test all the task and deploy to the server</p>
              </div>
            </div>
          </div>
          <div class="sortable-item-wrapper dark__bg-1100 mb-3">
            <div class="sortable-item card shadow-sm">
              <div class="card-body">
                <p class="fs-10 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>
    </div>

##### Javascript

    <script src="vendors/sortablejs/Sortable.min.js"></script>

#### Register

Please create your free Falcon account

Name
Email address
Password
Confirm Password
I accept the terms and privacy policy

or register with
google
facebook

##### 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