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>
</ul>
</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>
</ul>5. Customizable sortable checklist.
.nested-sort
.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,
propertyMap:
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
| Name | Role | Required |
|---|---|---|
| id | This is the unique identifier of the item | Yes |
| text | This appears as the list item text | Yes |
| parent | This is the id of the parent item | No |
Options
Must Read: Vue 3 Drag and Drop Draggable Next Component Plugin
| Name | Type | Role | Default value |
|---|---|---|---|
| actions | object | A list of functions to be invoked at certain points | {} |
| data | array | An array of objects to render a data-driven list | |
| el | string / DOM element | Targets 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 | |
| init | boolean | Determines 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 drop | true |
| listClassNames | string/array | A white-space separated string or array of class names to be added to the list of elements | nested-sort |
| listItemClassNames | string/array | A white-space separated string or array of class names to be added to the list of item elements | |
| propertyMap | object | Maps the sorted list of item properties | {} |
| nestingLevels | number | Determines the maximum depth of nesting. Any negative value means infinite levels of nesting. | -1 |
| renderListItem | function | This 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 |
API
Methods:
init()
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.
destroy()
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.
