jQuery UI Sortable toArray() Method

Last Updated : 17 Jan, 2022

jQuery UI is a web-based technology and consists of various GUI widgets, visual effects, and themes. These features can be implemented using the jQuery JavaScript Library. jQuery UI is the best tool for building UI interfaces for the webpages. It can also be used to build highly interactive web applications or can be used to add widgets easily.

In this article, we will be using the jQuery UI Sortable toArray() Method to serialize the sortable items id’s into an array of strings.

Syntax:

$(".selector").sortable("toArray" );

Parameters: This method accepts single parameter options that customize the serialization. It contains string type attributes with default “id” that holds the name of the attribute to use for the values.

Return Values: This method returns an array of id values of the sortable elements in sorted order.

CDN Link: First, add jQuery Mobile scripts needed for your project.

<script src= “https://code.jquery.com/jquery-1.12.4.js”></script>
<script src= “https://code.jquery.com/ui/1.12.1/jquery-ui.js”></script>
<link rel=”stylesheet” href=”https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css”>

Example: The below example illustrates the use of the jQuery UI Sortable toArray() method.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <meta charset="utf-8"> 
    <link rel="stylesheet" href= 
"https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
    <script src= 
        "https://code.jquery.com/jquery-1.12.4.js"> 
    </script> 
    <script src= 
        "https://code.jquery.com/ui/1.12.1/jquery-ui.js"> 
    </script> 
  
    <title>jQuery UI Sortable toArray() Method</title> 
  
    <style> 
        #sortableList { 
            list-style-type: none; 
        } 
  
        .geeks { 
            margin: 10px; 
            background: lightgreen; 
            padding: 10px; 
            border: 1px solid green; 
            font-size: 25px; 
        } 
    </style> 
    <script> 
        $(function () { 
            $('#sortableList').sortable({ 
                update: function (event, ui) { 
                    var benefits = $(this) 
                        .sortable('toArray').toString(); 
                          
                    $("#sortedList").text(benefits); 
                } 
            }); 
        }); 
    </script> 
</head> 
  
<body> 
    <center> 
        <h1 style="color: green;"> 
            GeeksforGeeks 
        </h1> 
        <h4>jQuery UI Sortable toArray() Method</h4> 
  
        <ul id="sortableList"> 
            <li id="Tutorials" class="geeks"> 
                1.Free Tutorials 
            </li> 
            <li id="Articles" class="geeks"> 
                2.Millions of articles 
            </li> 
            <li id="Webinars" class="geeks"> 
                3.Webinars by Industry Experts 
            </li> 
            <li id="Courses" class="geeks"> 
                4.Live, Online and Classroom Courses 
            </li> 
        </ul> 
  
        <h3>Benefits ID after sorting</h3> 
        <h2><span id='sortedList'></span></h2> 
    </center> 
</body>