Creating a Basic Sortable List

To create a basic sortable list, begin by building a simple HTML structure. You use an unordered list (ul) with several list items (li), each styled for clarity and usability. The id attribute on the list allows JavaScript to target it for drag-and-drop functionality. The CSS styles make the list visually appealing and provide feedback to users during dragging, such as changing background color and showing a ghost element.

Next, integrate SortableJS by including its script from a CDN. The essential step is initializing SortableJS on your list element. You select the list by its id and call Sortable.create, passing the list node and an options object. The animation property in the options adds a smooth transition when items are moved.

When a user clicks and drags a list item, SortableJS handles the drag-and-drop interaction. It updates the order visually in the browser and provides feedback like a ghost item to indicate the item being dragged. No server-side code or database setup is needed for this core interaction—everything runs in the browser. This setup gives you a fully functional, interactive sortable list, forming the foundation for more advanced drag-and-drop interfaces.