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:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

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:

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

Initializing the Sortable

After defining the sortable list structure, you need to initialize it using JavaScript/jQuery:

$(function() { $("#sortable-list").sortable(); });

This code initializes the sortable behavior on the #sortable-list element.

Sortable Options

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:

$("#sortable-list").sortable({ axis: "y", // Allow vertical sorting only handle: ".drag-handle" // Use elements with class "drag-handle" as handles });

Events

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:

$("#sortable-list").sortable({ update: function(event, ui) { console.log("Item moved: " + ui.item.text()); } });

Styling

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.

run this source code Browser View
  • 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

<!DOCTYPE html> <html> <head> <title>jQuery UI Sortable</title> <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <style> #sortable-list { list-style-type: none; padding: 0; margin: 0; } #sortable-list li { padding: 10px; background-color: #f5f5f5; border: 1px solid #ddd; margin-bottom: 5px; cursor: pointer; } </style> </head> <body> <ul id="sortable-list"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> </ul> <script> $(function() { $("#sortable-list").sortable({ axis: "y" }); }); </script> </body> </html>

Conclusion

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.






Related Topics
  1. jQuery UI Datepicker
  2. jQuery UI autocomplete
  3. Jquery UI Tabs
  4. Jquery UI Slider
  1. Jquery UI Dialog
  2. Jquery UI Draggable
  3. jQuery UI Accordion Plugin
  4. Jquery UI Tooltip
  5. Jquery UI Menu