Press "Enter" to skip to content

Dragging List Sorter in Vanilla JavaScript

Sorter is a small, sortable JavaScript library that allows for drag-and-drop sorting of list items. You can rearrange any items inside the parent node using the “pull-sort-enable” class or anything with the handleDrag() and handleDrop() event function.

make a sortable list with draggable items using javascript, javascript drag and drop from one list to another, javascript drag and drop reorder div, javascript drag and drop list

How to make use of it:

1. Install & download.

# NPM
$ npm i @alsolovyev/sorter --save

2. Import the Sorter’s JavaScript into the doc.

<script src="/dist/sorter.min.js"></script>
// OR
import Sorter from '@alsolovyev/sorter'

3. Initialize the sorter in your list and the library will do the remaining.

<ul data-list>
  <li><span><span><i>1</i></span></span></li>
  <li><span><span><i>2</i></span></span></li>
  <li><span><span><i>3</i></span></span></li>
  <li><span><span><i>4</i></span></span></li>
  <li><span><span><i>5</i></span></span></li>
  <li><span><span><i>6</i></span></span></li>
  <li><span><span><i>7</i></span></span></li>
  <li><span><span><i>8</i></span></span></li>
</ul>

Draggable List Sorter, Sorter Plugin/Github, draggable js examples, javascript drag and drop list, drag and drop reorder list javascript, draggable vanilla js


See Demo And Download

Official Website(alsolovyev): Click Here

This superior jQuery/javascript plugin is developed by alsolovyev. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *