API Docs for:
Show:

Gridster Class

Uses
Defined in: src/jquery.gridster.js:70

Constructor

Gridster

(
  • el
  • [options]
)

Defined in src/jquery.gridster.js:70

Parameters:

  • el HTMLElement

    The HTMLelement that contains all the widgets.

  • [options] Object optional

    An Object with all options you want to overwrite:

    • [widget_selector] HTMLElement | String optional

      Define who will be the draggable widgets. Can be a CSS Selector String or a collection of HTMLElements

    • [widget_margins] Array optional

      Margin between widgets. The first index for the horizontal margin (left, right) and the second for the vertical margin (top, bottom).

    • [widget_base_dimensions] Array optional

      Base widget dimensions in pixels. The first index for the width and the second for the height.

    • [extra_cols] Number optional

      Add more columns in addition to those that have been calculated.

    • [extra_rows] Number optional

      Add more rows in addition to those that have been calculated.

    • [min_cols] Number optional

      The minimum required columns.

    • [min_rows] Number optional

      The minimum required rows.

    • [autogenerate_stylesheet] Boolean optional

      If true, all the CSS required to position all widgets in their respective columns and rows will be generated automatically and injected to the <head> of the document. You can set this to false, and write your own CSS targeting rows and cols via data-attributes like so: [data-col="1"] { left: 10px; }

    • [serialize_params] Function optional

      Return the data you want for each widget in the serialization. Two arguments are passed: $w: the jQuery wrapped HTMLElement, and wgd: the grid coords object (col, row, size_x, size_y).

    • [collision] Object optional

      An Object with all options for Collision class you want to overwrite. See Collision docs for more info.

    • [draggable] Object optional

      An Object with all options for jQuery UI Draggable you want to overwrite. See http://jqueryui.com/demos/draggable/ for more info.

Methods

add_style_tag

(
  • css
)
Object

Defined in src/jquery.gridster.js:1899

Injects the given CSS as string to the head of the document.

Parameters:

  • css String

    The styles to apply.

Returns:

Object: Returns the instance of the Gridster class.

add_to_gridmap

(
  • grid_data
  • value
)
Class

Defined in src/jquery.gridster.js:339

Add a widget to the mapped array of positions.

Parameters:

  • grid_data Object

    The grid coords object representing the cells to update in the mapped array.

  • value HTMLElement | Boolean

    The value to set in the specified position .

Returns:

Class: Returns the instance of the Gridster Class.

add_widget

(
  • html
  • size_x
  • size_y
)
HTMLElement

Defined in src/jquery.gridster.js:140

Add a new widget to the grid.

Parameters:

  • html String

    The string representing the HTML of the widget.

  • size_x Number

    The nº of rows the widget occupies horizontally.

  • size_y Number

    The nº of columns the widget occupies vertically.

Returns:

HTMLElement: Returns the jQuery wrapped HTMLElement representing the widget that was just created.

can_go_player_up

(
  • widget_grid_data
)
Number | Boolean

Defined in src/jquery.gridster.js:995

Determines whether the player can move to a position above.

Parameters:

  • widget_grid_data Object

    The actual grid coords object of the player.

Returns:

Number | Boolean: If the player can be moved to an upper row returns the row number, else returns false.

can_go_up_to_row

(
  • widget_grid_data
  • col
  • row
)
Boolean | Number

Defined in src/jquery.gridster.js:1402

Check if the widget can move to the specified row, else returns the upper row possible.

Parameters:

  • widget_grid_data Number

    The current grid coords object of the widget.

  • col Number

    The target column.

  • row Number

    The target row.

Returns:

Boolean | Number: Returns the row number if the widget can move to the target position, else returns false.

can_go_widget_up

(
  • widget_grid_data
)
Number | Boolean

Defined in src/jquery.gridster.js:1044

Determines whether a widget can move to a position above.

Parameters:

  • widget_grid_data Object

    The actual grid coords object of the widget we want to check.

Returns:

Number | Boolean: If the widget can be moved to an upper row returns the row number, else returns false.

can_move_to

(
  • widget_grid_data
  • The
  • The
)
Boolean

Defined in src/jquery.gridster.js:1574

Check if it's possible to move a widget to a specific col/row. It takes into account the dimensions (size_y and size_x attrs. of the grid coords object) the widget occupies.

Parameters:

  • widget_grid_data Object

    The grid coords object that represents the widget.

  • The Object

    col target col.

  • The Object

    row target row.

Returns:

Boolean: Returns true if all cells are empty, else return false.

draggable

() Class

Defined in src/jquery.gridster.js:361

Make widgets draggable. It Wraps the jQuery UI Draggable Plugin.

Returns:

Class: Returns the instance of the Gridster Class.

empty_cells_player_occupies

() Class

Defined in src/jquery.gridster.js:1537

Remove from the array of mapped positions the reference to the player.

Returns:

Class: Returns the instance of the Gridster Class.

for_each_cell_occupied

(
  • el_grid_data
  • callback
)
Class

Defined in src/jquery.gridster.js:1671

Iterate over the cells occupied by a widget executing a function for each one.

Parameters:

  • el_grid_data Object

    The grid coords object that represents the widget.

  • callback Function

    The function to execute on each column iteration. Column and row are passed as arguments.

Returns:

Class: Returns the instance of the Gridster Class.

for_each_column_occupied

(
  • el_grid_data
  • callback
)
Class

Defined in src/jquery.gridster.js:1692

Iterate over the columns occupied by a widget executing a function for each one.

Parameters:

  • el_grid_data Object

    The grid coords object that represents the widget.

  • callback Function

    The function to execute on each column iteration. The column number is passed as first argument.

Returns:

Class: Returns the instance of the Gridster Class.

for_each_row_occupied

(
  • el_grid_data
  • callback
)
Class

Defined in src/jquery.gridster.js:1711

Iterate over the rows occupied by a widget executing a function for each one.

Parameters:

  • el_grid_data Object

    The grid coords object that represents the widget.

  • callback Function

    The function to execute on each column iteration. The row number is passed as first argument.

Returns:

Class: Returns the instance of the Gridster Class.

for_each_widget_above

(
  • col
  • row
  • callback
)
Class

Defined in src/jquery.gridster.js:1777

Iterate over each widget above the column and row specified.

Parameters:

  • col Number

    The column to start iterating.

  • row Number

    The row to start iterating.

  • callback Function

    The function to execute on each widget iteration. The value of this inside the function is the jQuery wrapped HTMLElement.

Returns:

Class: Returns the instance of the Gridster Class.

for_each_widget_below

(
  • col
  • row
  • callback
)
Class

Defined in src/jquery.gridster.js:1793

Iterate over each widget below the column and row specified.

Parameters:

  • col Number

    The column to start iterating.

  • row Number

    The row to start iterating.

  • callback Function

    The function to execute on each widget iteration. The value of this inside the function is the jQuery wrapped HTMLElement.

Returns:

Class: Returns the instance of the Gridster Class.

generate_faux_grid

(
  • rows
  • cols
)
Object

Defined in src/jquery.gridster.js:1922

Generates a faux grid to collide with it when a widget is dragged and detect row or column that we want to go.

Parameters:

  • rows Number

    Number of columns.

  • cols Number

    Number of rows.

Returns:

Object: Returns the instance of the Gridster class.

generate_grid_and_stylesheet

() Object

Defined in src/jquery.gridster.js:1996

Calculate columns and rows to be set based on the configuration parameters, grid dimensions, etc ...

Returns:

Object: Returns the instance of the Gridster class.

generate_stylesheet

(
  • rows
  • cols
)
Object

Defined in src/jquery.gridster.js:1855

It generates the neccessary styles to position the widgets.

Parameters:

  • rows Number

    Number of columns.

  • cols Number

    Number of rows.

Returns:

Object: Returns the instance of the Gridster class.

get_cells_occupied

(
  • el_grid_data
)
Object

Defined in src/jquery.gridster.js:1643

Get all columns and rows that a widget occupies.

Parameters:

  • el_grid_data Object

    The grid coords object of the widget.

Returns:

Object: Returns an object like { cols: [], rows: []}.

get_highest_occupied_cell

() Object

Defined in src/jquery.gridster.js:1809

Returns the highest occupied cell in the grid.

Returns:

Object: Returns an object with col and row numbers.

get_targeted_columns

(
  • [from_col]
)
Array

Defined in src/jquery.gridster.js:1608

Given the leftmost column returns all columns that are overlapping with the player.

Parameters:

  • [from_col] Number optional

    The leftmost column.

Returns:

Array: Returns an array with column numbers.

get_targeted_rows

(
  • [from_row]
)
Array

Defined in src/jquery.gridster.js:1626

Given the upper row returns all rows that are overlapping with the player.

Parameters:

  • [from_row] Number optional

    The upper row.

Returns:

Array: Returns an array with row numbers.

get_valid_rows

(
  • widget_grid_data
  • upper_rows
  • min_row
)
Number | Boolean

Defined in src/jquery.gridster.js:1095

Search a valid row for the widget represented by widget_grid_data' in theupperrowsarray. Iteration starts from row specified inminrow`.

Parameters:

  • widget_grid_data Object

    The actual grid coords object of the player.

  • upper_rows Array

    An array with columns as index and arrays of valid rows as values.

  • min_row Number

    The upper row from which the iteration will start.

Returns:

Number | Boolean: Returns the upper row valid from the upper_rows for the widget in question.

get_widgets_from_DOM

() Object

Defined in src/jquery.gridster.js:1982

Get all widgets in the DOM and register them.

Returns:

Object: Returns the instance of the Gridster class.

get_widgets_overlapped

() HTMLElements

Defined in src/jquery.gridster.js:1173

Get widgets overlapping with the player.

Returns:

HTMLElements: Returns a jQuery collection of HTMLElements.

get_widgets_under_player

() HTMLElement

Defined in src/jquery.gridster.js:931

Get widgets overlapping with the player.

Returns:

HTMLElement: Returns a jQuery collection of HTMLElements

is_empty

(
  • col
  • row
)
Boolean

Defined in src/jquery.gridster.js:850

Determines if the cell represented by col and row params is empty.

Parameters:

  • col Number

    The column to check.

  • row Number

    The row to check.

Returns:

Boolean: Returns true or false.

is_occupied

(
  • col
  • row
)
Boolean

Defined in src/jquery.gridster.js:869

Determines if the cell represented by col and row params is occupied.

Parameters:

  • col Number

    The column to check.

  • row Number

    The row to check.

Returns:

Boolean: Returns true or false.

is_placeholder_in

(
  • col
  • row
)
Boolean

Defined in src/jquery.gridster.js:823

Determines if the placeholder is currently over the row and col given.

Parameters:

  • col Number

    The column to check.

  • row Number

    The row to check.

Returns:

Boolean: Returns true or false.

is_placeholder_in_col

(
  • col
)
Boolean

Defined in src/jquery.gridster.js:837

Determines if the placeholder is currently over the column given.

Parameters:

  • col Number

    The column to check.

Returns:

Boolean: Returns true or false.

is_player

(
  • col_or_el
  • [row]
)
Boolean

Defined in src/jquery.gridster.js:791

Determines if there is a widget in the row and col given. Or if the HTMLElement passed as first argument is the player.

Parameters:

  • col_or_el Number | HTMLElement

    A jQuery wrapped collection of HTMLElements.

  • [row] Number optional

    The column to which we want to move the widgets.

Returns:

Boolean: Returns true or false.

is_player_in

(
  • col
  • row
)
Boolean

Defined in src/jquery.gridster.js:808

Determines if the widget that is being dragged is currently over the row and col given.

Parameters:

  • col Number

    The column to check.

  • row Number

    The row to check.

Returns:

Boolean: Returns true or false.

is_widget

(
  • col
  • row
)
Boolean | HTMLElement

Defined in src/jquery.gridster.js:889

Determines if there is a widget in the cell represented by col/row params.

Parameters:

  • col Number

    The column to check.

  • row Number

    The row to check.

Returns:

Boolean | HTMLElement: Returns false if there is no widget, else returns the jQuery HTMLElement

is_widget_under_player

(
  • col
  • row
)
Boolean

Defined in src/jquery.gridster.js:914

Determines if there is a widget in the cell represented by col/row params and if this is under the widget that is being dragged.

Parameters:

  • col Number

    The column to check.

  • row Number

    The row to check.

Returns:

Boolean: Returns true or false.

manage_movements

(
  • $widgets
  • to_col
  • to_row
)
Class

Defined in src/jquery.gridster.js:745

Sorts an Array of grid coords objects (representing the grid coords of each widget) in descending way.

Parameters:

  • $widgets HTMLElements

    A jQuery collection of HTMLElements representing the widgets you want to move.

  • to_col Number

    The column to which we want to move the widgets.

  • to_row Number

    The row to which we want to move the widgets.

Returns:

Class: Returns the instance of the Gridster Class.

move_widget_down

(
  • $widget
  • The
)
Class

Defined in src/jquery.gridster.js:1357

Move down the specified widget and all below it.

Parameters:

  • $widget HTMLElement

    The jQuery object representing the widget you want to move.

  • The Number

    number of cells that the widget has to move.

Returns:

Class: Returns the instance of the Gridster Class.

move_widget_to

(
  • $widget
)
Class

Defined in src/jquery.gridster.js:1268

Move a widget to a specific row. The cell or cells must be empty. If the widget has widgets below, all of these widgets will be moved also if they can.

Parameters:

  • $widget HTMLElement

    The jQuery wrapped HTMLElement of the widget is going to be moved.

Returns:

Class: Returns the instance of the Gridster Class.

move_widget_up

(
  • $widget
  • [y_units]
)
Class

Defined in src/jquery.gridster.js:1311

Move up the specified widget and all below it.

Parameters:

  • $widget HTMLElement

    The widget you want to move.

  • [y_units] Number optional

    The number of cells that the widget has to move.

Returns:

Class: Returns the instance of the Gridster Class.

next_position

(
  • size_x
  • size_y
)
Object

Defined in src/jquery.gridster.js:173

Get the most left column below to add a new widget.

Parameters:

  • size_x Number

    The nº of rows the widget occupies horizontally.

  • size_y Number

    The nº of columns the widget occupies vertically.

Returns:

Object: Returns a grid coords object representing the future widget coords.

on_drag

(
  • The
  • A
)

Defined in src/jquery.gridster.js:444

This function is executed when the player is being dragged.

Parameters:

  • The Event

    original browser event

  • A Object

    prepared ui object. See http://jqueryui.com/demos/draggable/ for more info.

on_overlapped_column_change

(
  • start_callback
  • stop_callback
)
Class

Defined in src/jquery.gridster.js:521

Executes the callbacks passed as arguments when a column begins to be overlapped or stops being overlapped.

Parameters:

  • start_callback Function

    Function executed when a new column begins to be overlapped. The column is passed as first argument.

  • stop_callback Function

    Function executed when a column stops being overlapped. The column is passed as first argument.

Returns:

Class: Returns the instance of the Gridster Class.

on_overlapped_row_change

(
  • start_callback
  • stop_callback
)
Class

Defined in src/jquery.gridster.js:561

Executes the callbacks passed as arguments when a row starts to be overlapped or stops being overlapped.

Parameters:

  • start_callback Function

    Function executed when a new row begins to be overlapped. The row is passed as first argument.

  • stop_callback Function

    Function executed when a row stops being overlapped. The row is passed as first argument.

Returns:

Class: Returns the instance of the Gridster Class.

on_start_drag

(
  • The
  • A
)

Defined in src/jquery.gridster.js:395

This function is executed when the player begins to be dragged.

Parameters:

  • The Event

    original browser event

  • A Object

    prepared ui object. See http://jqueryui.com/demos/draggable/ for more info.

on_start_overlapping_column

(
  • col
)
HTMLElements

Defined in src/jquery.gridster.js:1206

This callback is executed when the player begins to collide with a column.

Parameters:

  • col Number

    The collided column.

Returns:

HTMLElements: Returns a jQuery collection of HTMLElements.

on_start_overlapping_row

(
  • col
)
HTMLElements

Defined in src/jquery.gridster.js:1218

A callback executed when the player begins to collide with a row.

Parameters:

  • col Number

    The collided row.

Returns:

HTMLElements: Returns a jQuery collection of HTMLElements.

on_stop_drag

(
  • The
  • A
)

Defined in src/jquery.gridster.js:470

This function is executed when the player stops being dragged.

Parameters:

  • The Event

    original browser event

  • A Object

    prepared ui object. See http://jqueryui.com/demos/draggable/ for more info.

on_stop_overlapping_column

(
  • col
)
HTMLElements

Defined in src/jquery.gridster.js:1230

A callback executed when the the player ends to collide with a column.

Parameters:

  • col Number

    The collided row.

Returns:

HTMLElements: Returns a jQuery collection of HTMLElements.

on_stop_overlapping_row

(
  • row
)
HTMLElements

Defined in src/jquery.gridster.js:1248

This callback is executed when the player ends to collide with a row.

Parameters:

  • row Number

    The collided row.

Returns:

HTMLElements: Returns a jQuery collection of HTMLElements.

recalculate_faux_grid

() Object

Defined in src/jquery.gridster.js:1958

Recalculates the offsets for the faux grid. You need to use it when the browser is resized.

Returns:

Object: Returns the instance of the Gridster class.

register_widget

() Array

Defined in src/jquery.gridster.js:277

Creates the grid coords object representing the widget a add it to the mapped array of positions.

Returns:

Array: Returns the instance of the Gridster class.

remove_from_gridmap

(
  • grid_data
)
Class

Defined in src/jquery.gridster.js:326

Remove a widget from the mapped array of positions.

Parameters:

  • grid_data Object

    The grid coords object representing the cells to update in the mapped array.

Returns:

Class: Returns the instance of the Gridster Class.

remove_widget

(
  • el
)
Class

Defined in src/jquery.gridster.js:217

Remove a widget from the grid.

Parameters:

  • el HTMLElement

    The jQuery wrapped HTMLElement you want to remove.

Returns:

Class: Returns the instance of the Gridster Class.

serialize

(
  • [$widgets]
)
Array

Defined in src/jquery.gridster.js:243

Returns a serialized array of the widgets in the grid.

Parameters:

  • [$widgets] HTMLElement optional

    The collection of jQuery wrapped HTMLElements you want to serialize. If no argument is passed all widgets will be serialized.

Returns:

Array: Returns an Array of Objects with the data specified in the serialize_params option.

serialize_changed

() Array

Defined in src/jquery.gridster.js:265

Returns a serialized array of the widgets that have changed their position.

Returns:

Array: Returns an Array of Objects with the data specified in the serialize_params option.

set_cells_player_occupies

(
  • col
  • col
)
Class

Defined in src/jquery.gridster.js:1520

Update the array of mapped positions with the new player position.

Parameters:

  • col Number

    The new player col.

  • col Number

    The new player row.

Returns:

Class: Returns the instance of the Gridster Class.

set_dom_grid_height

() Object

Defined in src/jquery.gridster.js:1841

Set the current height of the parent grid.

Returns:

Object: Returns the instance of the Gridster class.

set_placeholder

(
  • col
  • row
)
Class

Defined in src/jquery.gridster.js:953

Put placeholder at the row and column specified.

Parameters:

  • col Number

    The column to which we want to move the placeholder.

  • row Number

    The row to which we want to move the placeholder.

Returns:

Class: Returns the instance of the Gridster Class.

set_player

(
  • start_callback
  • stop_callback
)
Class

Defined in src/jquery.gridster.js:597

Sets the current position of the player

Parameters:

  • start_callback Function

    Function executed when a new row begins to be overlapped. The row is passed as first argument.

  • stop_callback Function

    Function executed when a row stops being overlapped. The row is passed as first argument.

Returns:

Class: Returns the instance of the Gridster Class.

sort_by_row_asc

(
  • widgets
)
Array

Defined in src/jquery.gridster.js:686

Sorts an Array of grid coords objects (representing the grid coords of each widget) in ascending way.

Parameters:

  • widgets Array

    Array of grid coords objects

Returns:

Array: Returns the array sorted.

sort_by_row_asc

(
  • widgets
)
Array

Defined in src/jquery.gridster.js:706

Sorts an Array of grid coords objects by column (representing the grid coords of each widget) in ascending way.

Parameters:

  • widgets Array

    Array of grid coords objects

Returns:

Array: Returns the array sorted.

sort_by_row_desc

(
  • widgets
)
Array

Defined in src/jquery.gridster.js:726

Sorts an Array of grid coords objects (representing the grid coords of each widget) in descending way.

Parameters:

  • widgets Array

    Array of grid coords objects

Returns:

Array: Returns the array sorted.

update_widget_position

(
  • grid_data
  • value
)
Class

Defined in src/jquery.gridster.js:305

Update in the mapped array of positions the value of cells represented by the grid coords object passed in the grid_data param.

Parameters:

  • grid_data Object

    The grid coords object representing the cells to update in the mapped array.

  • value HTMLElement | Boolean

    Pass false or the jQuery wrapped HTMLElement, depends if you want to delete an existing position or add a new one.

Returns:

Class: Returns the instance of the Gridster Class.

widgets_below

(
  • $el
)
HTMLElements

Defined in src/jquery.gridster.js:1491

Get widgets below a widget.

Parameters:

  • $el HTMLElement

    The jQuery wrapped HTMLElement.

Returns:

HTMLElements: A jQuery collection of HTMLElements.

widgets_contraints

(
  • $widgets
)
Array

Defined in src/jquery.gridster.js:650

See which of the widgets in the $widgets param collection can go to a upper row and which not.

Parameters:

  • $widgets HTMLElements

    A jQuery wrapped collection of HTMLElements.

Returns:

Array: Returns a literal Object with two keys: can_go_up & can_not_go_up. Each contains a set of HTMLElements.