Sortable
Reorderable drag-and-drop lists for modern browsers and touch devices. No jQuery or framework required.
Sortable DocumentationExample
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 "Privacy Policy"</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>
