jQuery UI Sortable placeholder Option

Last Updated : 20 Jan, 2022

jQuery UI consists of GUI widgets, visual effects, and themes implemented using the jQuery JavaScript Library. jQuery UI is great for building UI interfaces for the webpages. It can be used to build highly interactive web applications or can be used to add widgets easily.

In this article, we are going to learn the jQuery UI Sortable placeholder Option. The placeholder option applies a class name to the whitespace left when the item is dragged to a different position. The blank space can be covered with some classes from jQuery UI.

Syntax: Initialize the placeholder option with any class as follows. The default value is false, which means none.

$("#sortable").sortable({
    placeholder: "ui-state-highlight",
});

To get the option after initialization, use the following syntax:

// Get the placeholder option
var placeholderOption = $("#sortable")
    .sortable("option", "placeholder");

To set the option after initialization, use the following syntax:

// Set the placeholder option
$("#sortable").sortable("option",
    "placeholder", "ui-state-highlight");

CDN Links: Use the following CDNs for the jQuery UI project.

<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css” />
<script src=”https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js”></script>

Example: In the following example, we have applied a highlight UI colour to the placeholder option.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <link rel="stylesheet" href= 
"https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" /> 
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"> 
    </script> 
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"> 
    </script> 
</head> 
  
<body> 
    <div data-role="page" id="gfgpage"> 
        <div data-role="header"> 
            <h1 style="color: green;">GeeksforGeeks</h1> 
        </div> 
        <div data-role="main" class="ui-content"> 
            <h3> jQuery UI Sortable placeholder Option</h3> 
            <ul id="sortable"> 
                <li>Data Structures</li> 
                <li>Algorithms</li> 
                <li>Competitive Programming</li> 
                <li>Machine Learning</li> 
            </ul> 
        </div> 
    </div> 
    <script> 
    $("#sortable").sortable({ 
        placeholder: "ui-state-highlight", 
    }); 
    </script> 
</body> 
  
</html>