SortableJS

Overview Official Website

SortableJS JavaScript library for reorderable drag-and-drop lists.

Javascript

<!-- sortablejs -->
<script src="{{url_for('static' ,filename='libs/sortablejs/Sortable.min.js')}}"></script>

Initjs (Custom js)

<!-- nestable init js -->
<script src="{{url_for('static' ,filename='js/pages/nestable.init.js')}}"></script>

Add Package

yarn add sortablejs --save

Remove Package

yarn remove sortablejs or you can remove package by removing specific package from package.json

Examples

Title Javascript

Nested Sortables List

Title	Javascript
Nested Sortables List	`var nestedSortables = [].slice.call(document.querySelectorAll('.nested-sortable')); if (nestedSortables) Array.from(nestedSortables).forEach(function (nestedSort){ new Sortable(nestedSort, { group: 'nested', animation: 150, fallbackOnBody: true, swapThreshold: 0.65 }); });`
Nested Sortables List with Handle	`var nestedSortablesHandles = [].slice.call(document.querySelectorAll('.nested-sortable-handle')); if (nestedSortablesHandles) // Loop through each nested sortable element Array.from(nestedSortablesHandles).forEach(function (nestedSortHandle){ new Sortable(nestedSortHandle, { handle: '.handle', group: 'nested', animation: 150, fallbackOnBody: true, swapThreshold: 0.65 }); });`

var nestedSortables = [].slice.call(document.querySelectorAll('.nested-sortable'));

if (nestedSortables)
Array.from(nestedSortables).forEach(function (nestedSort){
    new Sortable(nestedSort, {
        group: 'nested',
        animation: 150,
        fallbackOnBody: true,
        swapThreshold: 0.65
    });
});

Nested Sortables List with Handle

var nestedSortablesHandles = [].slice.call(document.querySelectorAll('.nested-sortable-handle'));

if (nestedSortablesHandles)
// Loop through each nested sortable element
Array.from(nestedSortablesHandles).forEach(function (nestedSortHandle){
    new Sortable(nestedSortHandle, {
        handle: '.handle',
        group: 'nested',
        animation: 150,
        fallbackOnBody: true,
        swapThreshold: 0.65
    });
});