API Docs for: v0.8.0
Show:

Gridster Class

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

Constructor

Gridster

(
  • el
  • [options]
  • [options.autogenerate_stylesheet] 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"]
  • [options.resize.axes] Axes in which widgets can be resized. Possible values: ['x', 'y', 'both']
  • [options.resize.max_size] Limit widget dimensions when resizing. Array values should be integers: `[max_cols_occupied, max_rows_occupied]
  • [options.resize.min_size] Limit widget dimensions when resizing. Array values should be integers: `[min_cols_occupied, min_rows_occupied]
)

Defined in src/jquery.gridster.js:90

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.

    • [max_cols] Number optional

      The maximum columns possible (set to null for no maximum).

    • [min_rows] Number optional

      The minimum required rows.

    • [avoid_overlapped_widgets] Boolean optional

      Avoid that widgets loaded from the DOM can be overlapped. It is helpful if the positions were bad stored in the database or if there was any conflict.

    • [auto_init] Boolean optional

      Automatically call gridster init method or not when the plugin is instantiated.

    • [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).

    • [shift_larger_widgets_down] Boolean optional

      Determines if how widgets get pushes out of the way of the player. If set to false smaller widgets will not move larger widgets out of their way . Defaults to true.

    • [shift_widgets_up] Boolean optional

      Determines if the player will automatically condense the grid and not allow a widget to have space above it. Defaults to true.

    • [show_element] Function optional

      Makes the given element visible. Two arguments are passed: $el: the jQuery wrapped HTMLElement, and callback: a function that is executed after the element is made visible. The callback parameter is optional.

    • [hide_element] Function optional

      Hides the given element. Two arguments are passed: $el: the jQuery wrapped HTMLElement, and callback: a function that is executed after the element is hidden. The callback parameter is optional.

    • [collision] Object optional

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

      • [wait_for_mouseup] Boolean optional
        Default is false. If true then it will not move colliding widgets during drag, but only on mouseup.
    • [draggable] Object optional

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

      • [ignore_dragging] Object | Function optional
        Note that if you use a Function, and resize is enabled, you should ignore the resize handlers manually (options.resize.handle_class).
    • [resize] Object optional

      An Object with resize config options.

      • [enabled] Boolean optional
        Set to true to enable resizing.
      • [handle_append_to] String optional
        Set a valid CSS selector to append resize handles to.
      • [handle_class] String optional
        CSS class name used by resize handles.
      • [start] Function optional
        Function executed when resizing starts.
      • [resize] Function optional
        Function executed during the resizing.
      • [stop] Function optional
        Function executed when resizing stops.
  • [options.autogenerate_stylesheet] 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"] Boolean

    { left: 10px; }`

  • [options.resize.axes] Axes in which widgets can be resized. Possible values: ['x', 'y', 'both'] Array

    .

  • [options.resize.max_size] Limit widget dimensions when resizing. Array values should be integers: `[max_cols_occupied, max_rows_occupied] Array

    `

  • [options.resize.min_size] Limit widget dimensions when resizing. Array values should be integers: `[min_cols_occupied, min_rows_occupied] Array

    `

Item Index

Methods

Methods

add_faux_cell

(
  • row
  • col
)
Object

Defined in src/jquery.gridster.js:3938

Add cell to the faux grid.

Parameters:

  • row Number

    The row for the new faux cell.

  • col Number

    The col for the new faux cell.

Returns:

Object:

Returns the instance of the Gridster class.

add_faux_cols

(
  • cols
)
Object

Defined in src/jquery.gridster.js:3999

Add cols to the faux grid.

Parameters:

  • cols Number

    The number of cols you want to add to the faux grid.

Returns:

Object:

Returns the instance of the Gridster class.

add_faux_rows

(
  • rows
)
Object

Defined in src/jquery.gridster.js:3971

Add rows to the faux grid.

Parameters:

  • rows Number

    The number of rows you want to add to the faux grid.

Returns:

Object:

Returns the instance of the Gridster class.

add_resize_handle representing the widget.

(
  • $w
)
HTMLElement

Defined in src/jquery.gridster.js:534

Append the resize handle into a widget.

Parameters:

  • $w Object

Returns:

HTMLElement:

Returns instance of gridster Class.

add_style_tag

(
  • css
)
Object

Defined in src/jquery.gridster.js:3859

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]
)
Gridster

Defined in src/jquery.gridster.js:1299

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 optional

    The value to set in the specified position .

Returns:

Gridster:

Returns the instance of the Gridster Class.

add_widget

(
  • html
  • [size_x]
  • [size_y]
  • [col]
  • [row]
  • [max_size]
  • [min_size]
  • [callback]
)
HTMLElement

Defined in src/jquery.gridster.js:403

Add a new widget to the grid.

Parameters:

  • html String | HTMLElement

    The string representing the HTML of the widget or the HTMLElement.

  • [size_x] Number optional

    The nº of rows the widget occupies horizontally.

  • [size_y] Number optional

    The nº of columns the widget occupies vertically.

  • [col] Number optional

    The column the widget should start in.

  • [row] Number optional

    The row the widget should start in.

  • [max_size] Array optional

    max_size Maximun size (in units) for width and height.

  • [min_size] Array optional

    min_size Minimum size (in units) for width and height.

  • [callback] Function optional

    Function executed after the widget is shown.

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:2608

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:3108

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:2661

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
  • col
  • row
)
Boolean

Defined in src/jquery.gridster.js:3300

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.

  • col Object

    The col to check.

  • row Object

    The row to check.

Returns:

Boolean:

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

center_widgets

()

Defined in src/jquery.gridster.js:725

Centers widgets in grid

collapse_widget

(
  • $widget
  • [callback]
)
HTMLElement

Defined in src/jquery.gridster.js:651

Collapse the widget to it's pre-expanded size

Parameters:

  • $widget HTMLElement

    The jQuery wrapped HTMLElement representing the widget.

  • [callback] Function optional

    Function executed when the widget is collapsed.

Returns:

HTMLElement:

Returns $widget.

destroy

(
  • remove
)
Object

Defined in src/jquery.gridster.js:4218

Destroy this gridster by removing any sign of its presence, making it easy to avoid memory leaks

Parameters:

  • remove Boolean

    If true, remove gridster from DOM.

Returns:

Object:

Returns the instance of the Gridster class.

disable

() Gridster

Defined in src/jquery.gridster.js:352

Disables dragging.

Returns:

Gridster:

Returns the instance of the Gridster Class.

disable

() Gridster

Defined in src/jquery.gridster.js:377

Disables drag-and-drop widget resizing.

Returns:

Gridster:

Returns instance of gridster Class.

dom_to_coords

(
  • $widget
)

Defined in src/jquery.gridster.js:1142

Convert widgets from DOM elements to "widget grid data" Objects.

Parameters:

  • $widget HTMLElement

    The widget to be converted.

draggable

() Gridster

Defined in src/jquery.gridster.js:1314

Make widgets draggable.

Returns:

Gridster:

Returns the instance of the Gridster Class.

empty_cells

(
  • col
  • row
  • size_x
  • size_y
  • [$exclude]
)
Class

Defined in src/jquery.gridster.js:912

Move down widgets in cells represented by the arguments col, row, size_x, size_y

Parameters:

  • col Number

    The column where the group of cells begin.

  • row Number

    The row where the group of cells begin.

  • size_x Number

    The number of columns that the group of cells occupy.

  • size_y Number

    The number of rows that the group of cells occupy.

  • [$exclude] HTMLElement optional

    Exclude widgets from being moved.

Returns:

Class:

Returns the instance of the Gridster Class.

empty_cells_player_occupies

() Gridster

Defined in src/jquery.gridster.js:3246

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

Returns:

Gridster:

Returns the instance of the Gridster Class.

enable

() Gridster

Defined in src/jquery.gridster.js:365

Enables dragging.

Returns:

Gridster:

Returns the instance of the Gridster Class.

enable

() Gridster

Defined in src/jquery.gridster.js:390

Enables drag-and-drop widget resizing.

Returns:

Gridster:

Returns instance of gridster Class.

expand_widget

(
  • $widget
  • size_x
  • size_y
  • col
  • [callback]
)
HTMLElement

Defined in src/jquery.gridster.js:604

Expand the widget. Width is set to the current grid width.

Parameters:

  • $widget HTMLElement

    The jQuery wrapped HTMLElement representing the widget.

  • size_x Number

    The number of cols that will occupy the widget.

  • size_y Number

    The number of rows that will occupy the widget.

  • col Number

    The column to resize the widget from.

  • [callback] Function optional

    Function executed when the widget is expanded.

Returns:

HTMLElement:

Returns $widget.

fit_to_content

(
  • $widget
  • max_cols
  • max_rows
  • [callback]
)
HTMLElement

Defined in src/jquery.gridster.js:686

Fit the size of a widget to its content (best guess)

Parameters:

  • $widget HTMLElement

    $widget The jQuery wrapped HTMLElement

  • max_cols Number

    max number of columns a widget can take up

  • max_rows Number

    max number of rows a widget can take up

  • [callback] Function optional

    Function executed when the widget is fit to content.

Returns:

HTMLElement:

Returns $widget.

for_each_cell_occupied widget.

(
  • grid_data
  • callback
)
Gridster

Defined in src/jquery.gridster.js:3409

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

Parameters:

  • grid_data Object
  • callback Function

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

Returns:

Gridster:

Returns the instance of the Gridster Class.

for_each_column_occupied

(
  • el_grid_data
  • callback
)
Gridster

Defined in src/jquery.gridster.js:3430

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:

Gridster:

Returns the instance of the Gridster Class.

for_each_row_occupied

(
  • el_grid_data
  • callback
)
Gridster

Defined in src/jquery.gridster.js:3449

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:

Gridster:

Returns the instance of the Gridster Class.

for_each_widget_above

(
  • col
  • row
  • callback
)
Gridster

Defined in src/jquery.gridster.js:3540

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:

Gridster:

Returns the instance of the Gridster Class.

for_each_widget_below

(
  • col
  • row
  • callback
)
Gridster

Defined in src/jquery.gridster.js:3557

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:

Gridster:

Returns the instance of the Gridster Class.

generate_faux_grid

(
  • rows
  • cols
)
Object

Defined in src/jquery.gridster.js:3914

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:4187

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

(
  • [opts]
)
Object

Defined in src/jquery.gridster.js:3792

It generates the necessary styles to position the widgets.

Parameters:

  • [opts] Object optional
    • set of gridster config options to generate stylessheets based on

Returns:

Object:

Returns the instance of the Gridster class.

get_cells_occupied

(
  • el_grid_data
)
Object

Defined in src/jquery.gridster.js:3381

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:3574

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:3345

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:3364

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:2718

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

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:4097

Get all widgets in the DOM and register them.

Returns:

Object:

Returns the instance of the Gridster class.

get_widgets_overlapped

() JQuery

Defined in src/jquery.gridster.js:2796

Get widgets overlapping with the player.

Returns:

JQuery:

Returns a jQuery collection of HTMLElements.

get_widgets_under_player

() HTMLElement

Defined in src/jquery.gridster.js:2513

Get widgets overlapping with the player or with the object passed representing the grid cells.

Returns:

HTMLElement:

Returns a jQuery collection of HTMLElements

is_empty

(
  • col
  • row
)
Boolean

Defined in src/jquery.gridster.js:2349

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:2414

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:2322

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:2336

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:2288

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:2307

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_static

(
  • col
  • row
)
Boolean

Defined in src/jquery.gridster.js:2466

Determines if widget is supposed to be static. WARNING: as of 0.6.6 this feature is buggy when used with resizable widgets, as resizing widgets above and below a static widgit can cause it to move. This feature is considered experimental at this time

Parameters:

  • col Number

    The column to check.

  • row Number

    The row to check.

Returns:

Boolean:

Returns true if widget exists and has static class, else returns false

is_widget

(
  • col
  • row
)
Boolean | HTMLElement

Defined in src/jquery.gridster.js:2442

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:2496

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
)
Gridster

Defined in src/jquery.gridster.js:2239

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

Depreciated.

Parameters:

  • $widgets JQuery

    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:

Gridster:

Returns the instance of the Gridster Class.

move_widget

(
  • $widget
  • new_col
  • new_row
  • callback
)
Gridster

Defined in src/jquery.gridster.js:2912

Move a widget to a specific row and column. If the widget has widgets below, all of these widgets will be moved also

Parameters:

  • $widget HTMLElement

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

  • new_col Number

    the column number to be set in widget

  • new_row Number

    the row number to be set in widget

  • callback Function

    is called when whole process is done.

Returns:

Gridster:

Returns the instance of the Gridster Class.

move_widget_down

(
  • $widget
  • y_units
)
Gridster

Defined in src/jquery.gridster.js:3041

Move down the specified widget and all below it.

Parameters:

  • $widget JQuery

    The jQuery object representing the widget you want to move.

  • y_units Number

    The number of cells that the widget has to move.

Returns:

Gridster:

Returns the instance of the Gridster Class.

move_widget_to

(
  • $widget
  • row
)
Gridster

Defined in src/jquery.gridster.js:2947

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.

  • row Object
    • row to move the widget to

Returns:

Gridster:

Returns the instance of the Gridster Class.

move_widget_up

(
  • $widget
  • [y_units]
)
Boolean

Defined in src/jquery.gridster.js:2990

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:

Boolean:

Returns if the widget moved

mutate_widget_in_gridmap

(
  • $widget
  • wgd
  • new_wgd
)
HTMLElement

Defined in src/jquery.gridster.js:812

Mutate widget dimensions and position in the grid map.

Parameters:

  • $widget HTMLElement

    The jQuery wrapped HTMLElement representing the widget to mutate.

  • wgd Object

    Current widget grid data (col, row, size_x, size_y).

  • new_wgd Object

    New widget grid data.

Returns:

HTMLElement:

Returns instance of gridster Class.

next_position

(
  • size_x
  • size_y
)
Object

Defined in src/jquery.gridster.js:986

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

(
  • event
  • ui
)

Defined in src/jquery.gridster.js:1468

This function is executed when the player is being dragged.

Parameters:

  • event Event

    The original browser event

  • ui Object

    A prepared ui object with useful drag-related data

on_overlapped_column_change

(
  • start_callback
  • stop_callback
)
Gridster

Defined in src/jquery.gridster.js:1820

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:

Gridster:

Returns the instance of the Gridster Class.

on_overlapped_row_change

(
  • start_callback
  • end_callback
)
Gridster

Defined in src/jquery.gridster.js:1860

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.

  • end_callback Function

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

Returns:

Gridster:

Returns the instance of the Gridster Class.

on_resize

(
  • event
  • ui
)

Defined in src/jquery.gridster.js:1726

This function is executed when a widget is being resized.

Parameters:

  • event Event

    The original browser event

  • ui Object

    A prepared ui object with useful drag-related data

on_start_drag

(
  • event
  • ui
)

Defined in src/jquery.gridster.js:1410

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

Parameters:

  • event Event

    The original browser event

  • ui Object

    A prepared ui object with useful drag-related data

on_start_overlapping_column

(
  • col
)
JQuery

Defined in src/jquery.gridster.js:2829

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

Parameters:

  • col Number

    The collided column.

Returns:

JQuery:

Returns a jQuery collection of HTMLElements.

on_start_overlapping_row

(
  • row
)
JQuery

Defined in src/jquery.gridster.js:2841

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

Parameters:

  • row Number

    The collided row.

Returns:

JQuery:

Returns a jQuery collection of HTMLElements.

on_start_resize

(
  • event
  • ui
)

Defined in src/jquery.gridster.js:1622

This function is executed every time a widget starts to be resized.

Parameters:

  • event Event

    The original browser event

  • ui Object

    A prepared ui object with useful drag-related data

on_stop_drag

(
  • event
  • ui
)

Defined in src/jquery.gridster.js:1525

This function is executed when the player stops being dragged.

Parameters:

  • event Event

    The original browser event

  • ui Object

    A prepared ui object with useful drag-related data

on_stop_overlapping_column

(
  • col
)
JQuery

Defined in src/jquery.gridster.js:2853

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

Parameters:

  • col Number

    The collided row.

Returns:

JQuery:

Returns a jQuery collection of HTMLElements.

on_stop_overlapping_row

(
  • row
)
JQuery

Defined in src/jquery.gridster.js:2872

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

Parameters:

  • row Number

    The collided row.

Returns:

JQuery:

Returns a jQuery collection of HTMLElements.

on_stop_resize

(
  • event
  • ui
)

Defined in src/jquery.gridster.js:1685

This function is executed every time a widget stops being resized.

Parameters:

  • event Event

    The original browser event

  • ui Object

    A prepared ui object with useful drag-related data

recalculate_faux_grid

() Object

Defined in src/jquery.gridster.js:4029

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

(
  • $el
)
Boolean

Defined in src/jquery.gridster.js:1162

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

Parameters:

  • $el HTMLElement | Object

    jQuery wrapped HTMLElement representing the widget, or an "widget grid data" Object with (col, row, el ...).

Returns:

Boolean:

Returns true if the widget final position is different than the original.

remove_all_widgets

(
  • callback
)
Gridster

Defined in src/jquery.gridster.js:1091

Remove all widgets from the grid.

Parameters:

  • callback Function

    Function executed for each widget removed.

Returns:

Gridster:

Returns the instance of the Gridster Class.

remove_empty_cells

(
  • col
  • row
  • size_x
  • size_y
  • exclude
)
Gridster

Defined in src/jquery.gridster.js:954

Move up widgets below cells represented by the arguments col, row, size_x, size_y.

Parameters:

  • col Number

    The column where the group of cells begin.

  • row Number

    The row where the group of cells begin.

  • size_x Number

    The number of columns that the group of cells occupy.

  • size_y Number

    The number of rows that the group of cells occupy.

  • exclude HTMLElement

    Exclude widgets from being moved.

Returns:

Gridster:

Returns the instance of the Gridster Class.

remove_from_gridmap

(
  • grid_data
)
Gridster

Defined in src/jquery.gridster.js:1286

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:

Gridster:

Returns the instance of the Gridster Class.

remove_style_tag

() Object

Defined in src/jquery.gridster.js:3894

Remove the style tag with the associated id from the head of the document

Returns:

Object:

Returns the instance of the Gridster class.

remove_widget

(
  • el
  • [silent]
  • [callback]
)
Gridster

Defined in src/jquery.gridster.js:1036

Remove a widget from the grid.

Parameters:

  • el HTMLElement

    The jQuery wrapped HTMLElement you want to remove.

  • [silent] Boolean | Function optional

    If true, widgets below the removed one will not move up. If a Function is passed it will be used as callback.

  • [callback] Function optional

    Function executed after the widget is removed.

Returns:

Gridster:

Returns the instance of the Gridster Class.

resizable

() Gridster

Defined in src/jquery.gridster.js:1356

Bind resize events to get resize working.

Returns:

Gridster:

Returns instance of gridster Class.

resize_widget

(
  • $widget
  • [size_x]
  • [size_y]
  • [callback]
)
HTMLElement

Defined in src/jquery.gridster.js:553

Change the size of a widget. Width is limited to the current grid width.

Parameters:

  • $widget HTMLElement

    The jQuery wrapped HTMLElement representing the widget.

  • [size_x] Number optional

    The number of columns that will occupy the widget. By default size_x is limited to the space available from the column where the widget begins, until the last column to the right.

  • [size_y] Number optional

    The number of rows that will occupy the widget.

  • [callback] Function optional

    Function executed when the widget is removed.

Returns:

HTMLElement:

Returns $widget.

resize_widget_dimensions

(
  • options
)
Gridster

Defined in src/jquery.gridster.js:4064

Resize dimensions of widgets in grid based on given options

Parameters:

  • options Object

Returns:

Gridster:

serialize

(
  • [$widgets]
)
Array

Defined in src/jquery.gridster.js:1107

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:1129

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
  • row
)
Gridster

Defined in src/jquery.gridster.js:3228

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

Parameters:

  • col Number

    The new player col.

  • col Number

    The new player row.

  • row Object

Returns:

Gridster:

Returns the instance of the Gridster Class.

set_dom_grid_height

() Object

Defined in src/jquery.gridster.js:3678

Set the current height of the parent grid.

Returns:

Object:

Returns the instance of the Gridster class.

set_dom_grid_width

() Object

Defined in src/jquery.gridster.js:3695

Set the current width of the parent grid.

Returns:

Object:

Returns the instance of the Gridster class.

set_placeholder

(
  • col
  • row
)
Gridster

Defined in src/jquery.gridster.js:2536

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:

Gridster:

Returns the instance of the Gridster Class.

set_player

(
  • col
  • row
  • no_player
)
Object

Defined in src/jquery.gridster.js:1896

Sets the current position of the player

Parameters:

  • col Number
  • row Number
  • no_player Boolean

Returns:

Object:

set_widget_max_size

(
  • $widget
  • max_size
)
Gridster

Defined in src/jquery.gridster.js:509

Change widget size limits.

Parameters:

  • $widget HTMLElement | Number

    The jQuery wrapped HTMLElement representing the widget or an index representing the desired widget.

  • max_size Array

    Maximun size (in units) for width and height.

Returns:

Gridster:

Returns instance of gridster Class.

set_widget_min_size

(
  • $widget
  • min_size
)
Gridster

Defined in src/jquery.gridster.js:484

Change widget size limits.

Parameters:

  • $widget HTMLElement | Number

    The jQuery wrapped HTMLElement representing the widget or an index representing the desired widget.

  • min_size Array

    Minimum size (in grid units) for width and height.

Returns:

Gridster:

Returns instance of gridster Class.

setup_resize

() Gridster

Defined in src/jquery.gridster.js:1384

Setup things required for resizing. Like build templates for drag handles.

Returns:

Gridster:

Returns instance of gridster Class.

sort_by_col_asc

(
  • widgets
)
Array

Defined in src/jquery.gridster.js:284

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_and_col_asc

(
  • widgets
)
Array

Defined in src/jquery.gridster.js:262

Sorts an Array of grid coords objects (representing the grid coords of each widget) placing first the empty cells upper left.

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:235

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_desc

(
  • widgets
)
Array

Defined in src/jquery.gridster.js:306

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_dimensions

(
  • $widget
  • wgd
)
Gridster

Defined in src/jquery.gridster.js:1236

Update the width and height for a widgets coordinate data.

Parameters:

  • $widget HTMLElement

    The widget to update.

  • wgd Object

    wgd Current widget grid data (col, row, size_x, size_y).

Returns:

Gridster:

Returns the instance of the Gridster Class.

update_widget_position

(
  • grid_data
  • value
)
Gridster

Defined in src/jquery.gridster.js:1213

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:

Gridster:

Returns the instance of the Gridster Class.

update_widgets_dimensions

() Gridster

Defined in src/jquery.gridster.js:1268

Update dimensions for all widgets in the grid.

Returns:

Gridster:

Returns the instance of the Gridster Class.

widgets_below

(
  • $el
)
JQuery

Defined in src/jquery.gridster.js:3198

Get widgets below a widget.

Parameters:

  • $el Object

    The jQuery wrapped HTMLElement.

Returns:

JQuery:

A jQuery collection of HTMLElements.

widgets_contraints

(
  • $widgets
)
Object

Defined in src/jquery.gridster.js:2203

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

Parameters:

  • $widgets JQuery

    A jQuery wrapped collection of HTMLElements.

Returns:

Object:

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