Sort Nested Lists With Drag And Drop – nested-sort

Preview:

Description:

nested-sort is a JavaScript library to dynamically generate a tree-like list of nested items that are sortable via drag and drop.

How to use it:

1. Install & download the package.

# NPM
$ npm install nested-sort --save

2. Load the main JavaScript nested-sort.umd.min.js in the document.

<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({
      // options here
  });
})();

5. You can also define the list data 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 an item has been dropped.

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

7. Apply a custom CSS class to the list

new nestedSort({
    listClassNames: '.nested-sort',
    listItemClassNames: 'list-group-item',
});

8. Define the levels of nesting.

new nestedSort({
    nestingLevels: 2
});

9. Customize the styles of the sortable list.

.nested-sort {
  /* your styles here */
}
.nested-sort li {
  /* your styles here */
}
.nested-sort .ns-dragged {
  /* when draggaed */
}
.nested-sort .ns-targeted {
  /* destination list item */
}
.nested-sort .ns-placeholder {
  /* when dragging */
}

9. API methods.

// initialize
instance.init();
// destroy
instance.destroy();

Changelog:

v5.1.1 (05/29/2021)

• fix: nesting level behaviour

v5.1.0 (03/20/2021)

• feat: render function for customised list items

v5.0.3 (11/21/2021)

• update

v5.0.1 (10/26/2021)

• feat: typescript integration
• fix: accommodate item drop before list items even if the cursor is indented

v5.0.0 (03/08/2021)

• removal of inline list item styles and adding a modifier class to the main list so styling can be done via CSS. getComputedStyleValue and addListItemStyles methods of the NestedSort class have been removed now.
• adding the new nestingLevels option to define the levels of nesting
• adding the possibility of server rendered lists property mapping
• adding support for ordered lists and making them the default list type

v4.3.0 (01/03/2021)

• adding the init option so you can control if the drag and drop functionality should be initialised
• adding the init() method so you can control when the drag and drop functionality should be enabled
• adding the destroy() method so you can disable the drag and drop functionality and remove the event listeners
• refactoring the event listeners

v4.2.1 (10/11/2020)

• Fixing a bug on multi-instance pages

v4.2.0 (08/10/2020)

• feat: items can now have a pre-defined order

v4.0.1 (07/07/2020)

• Improving the styling capability