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 "Privacy Policy"</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>
