Useful Libraries

Sortable.js is a lightweight, open-source JavaScript library that enables drag-and-drop sorting of list items or elements within a web page. It's highly customizable and simple to implement, making it a popular choice for developers who want to add interactive, sortable features to their web applications.

Key Features:

1. Drag-and-Drop Sorting: Sortable.js allows users to reorder list items by dragging and dropping them. This can be used on any HTML element, such as lists, tables, or grids.
2. Multi-Drag Support: It supports sorting multiple items at once by holding down keys like Ctrl or Shift to select multiple elements for dragging.
3. Customizable: You can control animations, event handling, and much more through the library's extensive set of options and event hooks.
4. Touch Support: The library works with both desktop and mobile browsers, making it versatile for touch-enabled devices.
5. Integrated with Frameworks: Sortable.js can be easily integrated with popular frameworks like Vue.js, React, and Angular.
6. Cross-Browser Compatibility: Sortable.js is designed to work across modern browsers, ensuring that drag-and-drop sorting works consistently for all users.

Example Use Cases:

• Reordering list items: Tasks in a to-do list or items in an e-commerce shopping cart.
• Managing UI components: Sorting items in customizable dashboards.
• Drag-and-drop file uploading: Reordering files before uploading them.

<ul id="sortable-list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
<script>
  var sortable = new Sortable(document.getElementById('sortable-list'));
</script>

Notes

https://www.npmjs.com/package/sortablejs

https://sortablejs.github.io/Sortable/

https://htmx.org/examples/sortable/

‍

https://www.jsdelivr.com/package/npm/sortablejs

<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>

‍