jQuery UI sortable
jQuery UI Sortable is a component of the jQuery UI library that allows you to create interactive, sortable lists or grids in your web applications. It enables users to reorder and sort items within a container using drag-and-drop interactions. This is particularly useful for creating features like sortable to-do lists, image galleries, or custom ordering of items.
Including jQuery UI
First, you need to include both the jQuery and jQuery UI libraries in your HTML file. You can do this by adding the following script tags to your HTML:
Creating a Sortable List
To create a sortable list, you need to structure your HTML with an ordered or unordered list ( <ol> or <ul> ) and list items ( <li> ) that you want to make sortable. Here's a simple example:
Initializing the Sortable
This code initializes the sortable behavior on the #sortable-list element.
jQuery UI Sortable provides various options for customization. For example, you can configure the sortable list to allow vertical or horizontal sorting, and you can specify a handle element that users must click and drag to reorder items:
You can bind event handlers to respond to sortable interactions. Commonly used events include start, stop, and update. For instance, you can trigger an action when an item is moved:
You can style the sortable list and items using CSS. jQuery UI applies various classes to elements within the sortable, allowing you to style them according to your design.
- Item 1
- Item 2
- Item 3
- Item 4
- Item 5
In this example, the sortable list contains items that can be reordered vertically. Users can click and drag the items to change their order, and the console will log when items are moved.
Full Source | jQuery
jQuery UI Sortable is a component of the jQuery UI library that enables the creation of interactive, drag-and-drop sortable lists or grids in web applications, allowing users to reorder and sort items within a container easily. It simplifies the process of implementing sortable features, making it ideal for tasks like organizing to-do lists, creating image galleries, or customizing item orders.