jQuery UI Sortable grid Option
Last Updated :
09 May, 2022
jQuery UI is a web-based technology and consists of GUI widgets, visual effects, and themes 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 learn how to use the jQuery UI Sortable grid Option. Using this option, we can snap the sorting element or helper to a grid, every x, and y pixels. The default value of this option is false.
Syntax:
The grid option takes an array value and the syntax is as follows.
$( ".selector" ).sortable({
grid: [ 20, 10 ]
});
Get the grid option
var grid = $( ".selector" ).sortable( "option", "grid" );
Set the grid option
$( ".selector" ).sortable( "option", "grid", [ 20, 10 ] );
CDN Link: The following jQuery Mobile scripts will be needed for your project so we need to add these scripts to your project.
<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>
Example: This example describes the uses of the jQuery UI Sortable grid Option.
HTML
<!DOCTYPE html>
<html lang="en">
<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>
<style>
#sortable {
list-style-type: none;
width: 50%;
}
#sortable li {
margin: 10px 0;
padding: 0.5em;
font-size: 25px;
height: 20px;
background-color: green;
}
#btn
{
margin-left: 50px;
padding: 0.5;
font-size: 20px;
height: 40px;
width: 40%;
}
</style>
<script>
$(function () {
$("#btn").on('click', function () {
var grid = $("#sortable").sortable( "option", "grid" );
document.getElementById('gfg').innerHTML +=
"Grid pixels : " + grid;
});
});
$(function () {
$("#sortable").sortable();
$("#sortable").sortable( "option", "grid", [ 20, 10 ] );
});
</script>
</head>
<body>
<center>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h4>jQuery UI Sortable grid Option</h4>
<ul id="sortable">
<li>Geeks1</li>
<li>Geeks2</li>
<li>Geeks3</li>
</ul>
<input type="button" id="btn"
value="Get Grid">
<h4><span id="gfg"></span></h4>
</center>
</body>
</html>
Output:
jQuery UI Sortable grid Option
Reference: https://api.jqueryui.com/sortable/#option-grid
Similar Reads
jQuery UI Sortable axis Option jQuery UI Sortable Widget axis option is used to define the items that can be dragged only horizontally or vertically. Its possible values are - "x", "y". Syntax: $( ".selector" ).sortable({ axis: "x" }); Approach: First, add jQuery UI scripts needed for your project. <link rel="stylesheet" href=
1 min read
jQuery UI Sortable Cursor Option jQuery UI Sortable Widget cursor Option is used to define the cursor that is being shown while sorting the elements. Learn more about jQuery here. Syntax: $( ".selector" ).sortable({ cursor: "move" }); Approach: First, add jQuery UI scripts needed for your project. <link rel="stylesheet" href="//
1 min read
jQuery UI Sortable cursorAt Option jQuery UI consists of GUI widgets, visual effects, and themes implemented using HTML, CSS, and jQuery. jQuery UI is great for building UI interfaces for the webpages. The jQuery UI Sortable cursorAt option is used to move the cursor at a given position at the time of sorting. This option is working
1 min read
jQuery UI Sortable appendTo Option The Sortable widget appendTo option is used to append the elements when the sortable elements are dragged with mouse. Syntax: $( ".selector" ).sortable({ appendTo: document.body }); Approach: First, add jQuery UI scripts needed for your project. <link rel="stylesheet" href="//code.jquery.com/ui/1
1 min read
jQuery UI Sortable distance Option 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 app
2 min read