jQuery - Interaction Sort-able

Previous
Quiz

Description

The Sort able function can be used with interactions in JqueryUI.This function can be enabled sortable functionality on any DOM element.Click on and drag an element to a new spot within the list, and the other items will adjust to fit. By default, sortable items share draggable properties.

Syntax

Here is the simple syntax to use drag-able −

 $(function() { $( "#sortable" ).sortable(); $( "#sortable" ).disableSelection(); });

Example

Following is a simple example showing the usage of sort able −

 <!doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title>jQuery UI Sortable - Default functionality</title> <link rel = "stylesheet" href = "//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> <script type = "text/javascript" src = "https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"> </script> <script type = "text/javascript" src = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"> </script> <style> #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; } #sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; } #sortable li span { position: absolute; margin-left: -1.3em; } </style> <script> $(function() { $( "#sortable" ).sortable(); $( "#sortable" ).disableSelection(); }); </script> </head> <body> <ul id = "sortable"> <li class = "ui-state-default"><span class = "ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li> <li class = "ui-state-default"><span class = "ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li> <li class = "ui-state-default"><span class = "ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li> <li class = "ui-state-default"><span class = "ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li> <li class = "ui-state-default"><span class = "ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li> <li class = "ui-state-default"><span class = "ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li> <li class = "ui-state-default"><span class = "ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li> </ul> </body> </html>

This will produce following result −

jquery-interactions.htm
Print Page
Previous
Next
Advertisements