jQuery Nested Sortable Draggable With Vanilla JavaScript Library

Nested Sort is a JavaScript library that helps you sort a nested list of items by dragging and dropping. Unfortunately, it does not support touch screens yet.

In the nested list below, try dragging an element (the border of the dragged element will become red) and drop it onto another element (the border of the target element will become green). Once done, the dropped item will appear before the target item and the new structure of the list will be presented to you in the results section.

Must read: Angular Directives For Sorting Nested Lists Using HTML5 Drag & Drop API

How to make use of it

1. To install the library using NPM:

npm install nested-sort --save

2. Then include it in your code:

import NestedSort from 'nested-sort'

3. You can include the UMD library version of:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/nested-sort.umd.min.js"></script>

4. Create nested lists like this:

<ul id="draggable">
  <li data-id="1">Topic 1</li>
  <li data-id="2">Topic 2</li>
  <li data-id="3">Topic 3
    <ul data-id="3">
      <li data-id="31">Topic 3-1</li>
      <li data-id="32">Topic 3-2</li>
      <li data-id="33">Topic 3-3</li>
  <li data-id="4">Topic 4</li>
  <li data-id="5">Topic 5</li>
  <li data-id="6">Topic 6</li>
  <li data-id="7">Topic 7</li>
  <li data-id="8">Topic 8</li>

5. Customizable sortable checklist.


.nested-sort li 

.nested-sort .ns-dragged {
  /* when draggaed */

.nested-sort .ns-targeted 
  /* destination checklist item */

.nested-sort .ns-placeholder {
  /* when dragging */

6. JS array as follows:

const data = [
      { item_id: 1, item_title: 'One' },
      { item_id: 11, item_title: 'One-One', item_parent: 1 },
      { item_id: 2, item_title: 'Two' },
      { item_id: 3, item_title: 'Three' },
      { item_id: 1121, item_title: 'One-One-Two-One', item_parent: 112 },
      { item_id: 1122, item_title: 'One-One-Two-Two', item_parent: 112 },
      { item_id: 1123, item_title: 'One-One-Two-Three', item_parent: 112 },
      { item_id: 12, item_title: 'One-Two', item_parent: 1 },
      { item_id: 111, item_title: 'One-One-One', item_parent: 11 },
      { item_id: 112, item_title: 'One-One-Two', item_parent: 11 },
      { item_id: 113, item_title: 'One-One-Three', item_parent: 11 },
new nestedSort({
    data: data,
      id: 'item_id',
      parent: 'item_parent',
      text: 'item_title',
    el: '#draggable'

Data mapping

The following table maps the different properties of each data element:

Must Read: A Draggable Sortable Nested Tree Component Library | he-tree-vue

idThis is the unique identifier of the itemYes
textThis appears as the list item textYes
parentThis is the id of the parent itemNo


Must Read: Vue 3 Drag and Drop Draggable Next Component Plugin

NameTypeRoleDefault value
actionsobjectA list of functions to be invoked at certain points{}
dataarrayAn array of objects to render a data-driven list
elstring / DOM elementTargets the list element or the wrapper for it and can be one of the following: CSS selector of a data-driven list wrapper element e.g. #list-wrapperCSS selector of a server-rendered list e.g. #list or .listDOM element of a server-rendered list (suitable for multiple server-rendered instances on the same page) – more info
initbooleanDetermines if the drag-and-drop functionality should be enabled after rendering the list. If set to false you’ll need to invoke the init() method to enable the drag and droptrue
listClassNamesstring/arrayA white-space separated string or array of class names to be added to the list of elementsnested-sort
listItemClassNamesstring/arrayA white-space separated string or array of class names to be added to the list of item elements
propertyMapobjectMaps the sorted list of item properties{}
nestingLevelsnumberDetermines the maximum depth of nesting. Any negative value means infinite levels of nesting.-1
renderListItemfunctionThis is a hook to control how data-driven list items render. It receives 2 arguments:el: the default list item element created by the libraryitem: the representative data item




Configures (enables) the drag-and-drop functionality by adding all necessary event listeners and list item attributes. This is required when a list is presented with the init option set to false.


To disable the drag-and-drop functionality by removing all event listeners and setting the

See Also –

A jQuery Binding For SortableJS JavaScript Library
Makes Any Table Sortable By Header Columns | jQuery sortableTable.js
Implement Drag, Drop, and Sortable Behaviors jQuery UI | agnostic-draggable

See Demo And Download


Official Website(gilgaz): Click Here

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

Related Posts


A Simple Searchable Select Dropdown Plugin | jQuery Select Search

Simple jQuery search on the selection options plugin for your website. Next, there is a checkbox replacement plugin that refines and beautifies the original selection element with…


A Quick jQuery-Based Country Picker With Flags | Country Select JS

Country Select JS is a jQuery plugin to select a country, based on the international phone input plugin. Adds a flag dropdown to any input, which lists…


Simple and Fast Autocomplete and Typeahead Javascript Library | autoComplete.js

autoComplete.js is a simple, pure, and incrementally designed JavaScript library for speed, high versatility, and seamless integration with a wide variety of projects and systems. Features Pure…


Bootstrap Notification Message Alert Plugin with jQuery

BootstrapMsg is a jQuery plugin for displaying messages with Bootstrap alert classes to generate hierarchical in-page navigation for an extended webpage sectioned by heading components. Using Bootstrap…


jQuery Plugin for Transforming HTML Tables Into Charts Using Google Charts

Chartinator is a jQuery plugin for converting HTML tables, Google Sheets and js arrays into charts using Google Charts. Use data from HTML tables Chartinator is designed…


Customizable & Composable Charts for VueJS | vue-wcharts

WCharts is a library that makes it easy to create your own charts using Vuejs. You can easily create reusable chart components. Use a basic layout or…

Leave a Reply

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