Sort Nested Lists With Drag And Drop – nested-sort

Category: Drag & Drop , Javascript | January 3, 2021
Author: gilgaz
Views Total: 128 views
Official Page: Go to website
Last Update: January 3, 2021
License: MIT

Preview:

Sort Nested Lists With Drag And Drop – nested-sort

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

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

You Might Be Interested In:


One thought on “Sort Nested Lists With Drag And Drop – nested-sort

  1. Tom

    Very nice Script. But it doesn’t work for me if I want to classify an element on same level. I can only insert child elements when moving. (Win+FF84)

    Reply

Leave a Reply