Home Api Docs Examples

Getting Started

API

Required Params

Note: Required and Optional Params are inserted into a JS Object

Property Default Type Description
padding 0 integer (px) padding for the grid-container
gap 0 integer (px) gap between rows/columns for the grid-container
numCols - integer need to define the number of columns in the grid system
draggable - boolean enable the modes for dragging along with initialization of grid dragging system. (Is needed in order for drag_mode, drag_factor to take effect)
drag_mode swap string Used to determine the type of the dragging mode which can be either "append" OR "swap". Needs (See examples page for visualization)
drag_factor - integer determines how "easy" it is to swap/append within the grid system. 0 < n < 1. Close to 0 meaning very easy to swap/append grid elements and close to 1 meaning precise drag over is required

Optional Params

Note: Required and Optional Params are inserted into a JS Object

Property Default Type Description
color White string background color of the grid
sizeCol 1fr integer (px) fix the size of each column in the grid
sizeRow 1fr integer (px) fix the size of each in the grid
width max-content integer (px) Used to fix the width of the grid instead of growing with the number of columns
height max-content integer (px) Used to fix the height of the grid instead of growing vertically
custom_size [1*(# of grid elems)] Array Array must be of integers > 1 corresponding to the row span of the grid element at an index. Each index of this array represents the corresponding index of grid element in the container before intializing the grid system

Available Methods

Note: Methods other than initializeGrid() must be called using the returned object from grid intialization method call

Name Args returned Behaviour
initializeGrid Params as JS Object, grid-container id JS Object takes in the required/optional params and intializes the grid system including dragging, any CSS properties etc. Returns a JS Object which is then used to call upon the API's Available
addElement DOM element, rowSize JS Object adds an element to the grid whose JS object this function is called with. rowSize must follow same rule as custom_size optional param and is optional. (Note: rowSize only works if the grid is intialized with the custom_size optional parameter and otherwise by default element takes up 1 row worth of space)

Some of the Initialization from examples page

Note: Methods other than initializeGrid() must be called using the returned object from grid intialization method call

Description API Call(s) Code Snippets
Draggable grid with the swap functionality. InitializeGrid is called three times since there are 3 independent swappable grid systems.

              const style2 = {
                padding: 15,
                gap: 20,
                numCols: 1,
                custom_size: [1, 1, 1],
                sizeCol: 150,
                sizeRow: 80,
                color: "rgba(255, 0, 0, 0.4)",
                draggable: true,
                drag_mode: "swap",
                drag_factor: 1,
              };
              initializeGrid(style2, "#items");
              initializeGrid(style2, "#items2");
              initializeGrid(style2, "#items3");