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 >w3wiki</ 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
Contact Us