SortableJS

Overview Official Website

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

Javascript

<!-- sortablejs -->
<script src="~/assets/libs/sortablejs/Sortable.min.js"></script>

Initjs (Custom js)

<!-- nestable init js -->
<script src="~/assets/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')); for (var i = 0; i < nestedSortables.length; i++) { new Sortable(nestedSortables[i], { group: 'nested', animation: 150, fallbackOnBody: true, swapThreshold: 0.65 }); }`
Nested Sortables List with Handle	`var nestedSortablesHandles = [].slice.call(document.querySelectorAll('.nested-sortable-handle')); for (var i = 0; i < nestedSortablesHandles.length; i++) { new Sortable(nestedSortablesHandles[i], { handle: '.handle', group: 'nested', animation: 150, fallbackOnBody: true, swapThreshold: 0.65 }); }`

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

for (var i = 0; i < nestedSortables.length; i++) {
    new Sortable(nestedSortables[i], {
        group: 'nested',
        animation: 150,
        fallbackOnBody: true,
        swapThreshold: 0.65
    });
}

Nested Sortables List with Handle

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

for (var i = 0; i < nestedSortablesHandles.length; i++) {
    new Sortable(nestedSortablesHandles[i], {
        handle: '.handle',
        group: 'nested',
        animation: 150,
        fallbackOnBody: true,
        swapThreshold: 0.65
    });
}