Sort Nested Lists With Drag And Drop – nested-sort

Category: Drag & Drop , Javascript | October 11, 2020
Author:gilgaz
Views Total:39 views
Official Page:Go to website
Last Update:October 11, 2020
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 top list.

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

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 */
}

Changelog:

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:


Leave a Reply