Open In App

jQWidgets jqxSortable grid Property

Improve
Improve
Like Article
Like
Save
Share
Report

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
Previous
Next
Share your thoughts in the comments
Similar Reads