sortablejs

SortableJS is a modern, lightweight, and customizable library that allows you to reorder lists and grids using drag-and-drop functionality. This section covers the steps required to include SortableJS in your project:

Install from Yarn

To install SortableJS, run the following command in the root directory of your project:

yarn add sortablejs --save

To use SortableJS in your project, you need to include its JavaScript file in your HTML:

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

Below is an example of the HTML code to create a sortable list using SortableJS. Users can drag-and-drop the list items to reorder them:

    

        
Item 1
        
Item 2
        
Item 3
        
Item 4
    

Here is the JavaScript code that initializes the SortableJS instance. This will enable the drag-and-drop functionality for the list:

const sortable = new Sortable(document.getElementById('sortableList'), {
    animation: 150, // Smooth animation for the drag-and-drop action
    ghostClass: 'sortable-ghost', // Class for the dragged item
    dragClass: 'sortable-drag', // Class for the item being dragged
});

The above JavaScript code does the following:

• Selects the `ul` element with the ID `sortableList` to make it sortable.
• Enables drag-and-drop functionality by initializing a `Sortable` instance.
• The `animation` option adds smooth animation when the items are dragged and dropped.
• The `ghostClass` option sets the class for the dragged item, which can be styled separately (for example, to change opacity or add a border).
• The `dragClass` option sets the class for the item while it's being dragged, allowing for different styles during the dragging action.