Press "Enter" to skip to content

jQuery Nested Sortable Draggable With Vanilla JavaScript Library | Nested Sort

Sort Nested Lists With Drag And Drop – nested-sort is a JavaScript library to dynamically generate a tree-like checklist of nested gadgets that are sortable by way of drag and drop.

Nested Sort is a Vanilla JS library, without any dependencies, which helps you to sort a nested list of items by drag and drop.

How to make use of it

1. Install & obtain the package deal.

# NPM
$ npm install nested-sort --save

2. Load the principle JavaScript nested-sort.umd.min.js within the doc.

<script src="/path/to/dist/nested-sort.umd.min.js"></script>
// OR from a CDN
<script src="https://cdn.jsdelivr.net/npm/nested-sort/dist/nested-sort.umd.min.js"></script>

3. Create nested lists as follows:

<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>

4. Initialize the library to make the lists sortable.

(function() {
  new nestedSort();
})();

5. You may also outline the checklist knowledge in a JS array as follows:

<div id="draggable"></div>
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'
});

6. Execute a function after merchandise has been dropped.

new nestedSort({
    actions: {
      onDrop: function (data) 
        console.log(data)
      
    }
});

7. Apply a customized CSS class to the highest checklist.

new nestedSort({
    listClassNames: ['nested-sort']
});

8. Customize the kinds of the 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 */
}

jQuery Nested List Drag and Drop, nested-sort Github, jQuery sortable/draggable nesting


See Demo And Download

Official Website(gilgaz): Click Here

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

Be First to Comment

    Leave a Reply

    Your email address will not be published.