jQWidgets jqxSortable grid Property
jQWidgets is a JavaScript framework for making web-based applications for PC and mobile devices. It is a very powerful and optimized framework, platform-independent, and widely supported. The jqxSortable represents a jQuery plugin that allows you to reorder elements in an HTML list or div tags using the mouse.
The grid Property is used to display the sorting elements in a grid, every x, and y pixels. It places the content in a grid system in x and y directions according to grid width. It is array type & its default value is ‘false‘.
Syntax:
- It is used to set the grid property:
$('Selector').jqxSortable({ "grid", [ 50, 50 ] });
- It is used to return the grid property:
var grid = $('Selector').jqxSortable('grid')
Linked Files: Download jQWidgets from the given link. In the HTML file, locate the script files in the downloaded folder.
<link type=”text/css” rel=”Stylesheet” href=”jqwidgets/styles/jqx.base.css” />
<script type=”text/javascript” src=”scripts/jquery-1.11.1.min.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”jqwidgets/globalization/gloōbalize.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxsortable.js”></script>
Example: The below example illustrates the jqxSortable grid Property in jQWidgets.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< link type = "text/css" rel = "stylesheet" href =
"jqwidgets/styles/jqx.base.css" />
< script type = "text/javascript" src =
"scripts/jquery-1.11.1.min.js" >
</ script >
< script type = "text/javascript" src =
"jqwidgets/jqxcore.js" >
</ script >
< script type = "text/javascript" src =
"jqwidgets/globalization/globalize.js" >
</ script >
< script type = "text/javascript" src =
"jqwidgets/jqxsortable.js" >
</ script >
< style >
.heading {
text-align: center;
}
h1 {
color: green;
}
#divID {
list-style-type: none;
margin: auto;
width: 237px;
height: 237px;
border: 1px solid #e1e1e1;
}
#divID div {
border: 1px solid #e1e1e1;
margin: 1px;
float: left;
text-align: center;
font-size: 60px;
color: #292828;
width: 75px;
height: 75px;
}
</ style >
</ head >
< body >
< div class = "heading" >
< h1 >GeeksforGeeks</ h1 >
< h3 >
jQWidgets jqxSortable grid property
</ h3 >
</ div >
< div id = "divID" >
< div >A</ div >
< div >2</ div >
< div >C</ div >
< div >4</ div >
< div >E</ div >
< div >6</ div >
< div >G</ div >
< div >8</ div >
</ div >
< script type = "text/javascript" >
$(document).ready(function () {
$("#divID").jqxSortable();
$("#divID").jqxSortable("grid", [50, 50]);
});
</ script >
</ body >
</ html >
|
Output:
Reference: https://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxsortable/jquery-sortable-api.htm
Last Updated :
23 May, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...