Stack Overflow
Stack Overflow

Questions tagged [gridster]

Gridster is a jQuery plugin that allows building intuitive draggable layouts from elements spanning multiple columns.

Overview

Gridster is a jQuery plugin that allows building intuitive draggable layouts from elements spanning multiple columns. You can even dynamically add and remove elements from the grid. It is on par with sliced bread, or possibly better. MIT licensed. Suitable for children of all ages.

HTML syntax

<div class="gridster">
    <ul>
        <li data-row="1" data-col="1" data-sizex="1" data-sizey="1"></li>
        <li data-row="2" data-col="1" data-sizex="1" data-sizey="1"></li>
        <li data-row="3" data-col="1" data-sizex="1" data-sizey="1"></li>

        <li data-row="1" data-col="2" data-sizex="2" data-sizey="1"></li>
        <li data-row="2" data-col="2" data-sizex="2" data-sizey="2"></li>

        <li data-row="1" data-col="4" data-sizex="1" data-sizey="1"></li>
        <li data-row="2" data-col="4" data-sizex="2" data-sizey="1"></li>
        <li data-row="3" data-col="4" data-sizex="1" data-sizey="1"></li>

        <li data-row="1" data-col="5" data-sizex="1" data-sizey="1"></li>
        <li data-row="3" data-col="5" data-sizex="1" data-sizey="1"></li>

        <li data-row="1" data-col="6" data-sizex="1" data-sizey="1"></li>
        <li data-row="2" data-col="6" data-sizex="1" data-sizey="2"></li>
    </ul>
</div>

Links

Related tags

276 questions
5
votes
1 answer

Insert Gridster into WordPress template

I have a problem wih my WordPress plugin, I want to insert Gridster into the plugin but it doesn't work. Here I am loading the files, which are correctly in the folder. function add_my_stylesheet() { wp_enqueue_style( 'myCSS', plugins_url(…
user5718928
5
votes
2 answers

Move Gridster Widgets programmatically

I am trying to move Gridster widget programmatically , I want to achieve the effect like dragging the gridster widget . Currently i am assigning data-col and data-row attribute using Jquery but the gridster widget simply just overlapped with other…
Meuk Light
  • 985
  • 1
  • 7
  • 9
5
votes
1 answer

Efficient way of using window.resize (or other method) to fire jquery functions, and making gridster.js repsonsive

I have been tinkering with some thoughts on a round-about way of making gridster.js responsive. I found a code snippit in the github issues in gridster and realized if I ran it under certain window sizing and destroyed and re-ran gridster I can get…
ajmajmajma
  • 13,712
  • 24
  • 79
  • 133
5
votes
2 answers

Get new size of Gridster widget after resize

Using Gridster, we have created a grid with resizable widgets using the resize.enabled config option. After the user finishes resizing a Gridster widget, we would like to get new final size of the widget. How can we do this?
microchip78
  • 2,040
  • 2
  • 28
  • 39
5
votes
1 answer

Gridster - Save html content of divs to load grid dynamically

i've done some test with gridster and i can save some gridster data, like coords, size, ids etc. But i'm unnable to save content of the divs who populate gridster in a way i can load later along with gridster coords for each element. Here is my…
Juan
  • 51
  • 1
  • 3
5
votes
2 answers

How can I change the number of columns in Gridster?

I have a a gridster based layout that will start with a set number of columns and a fixed number of tiles. Is there a way to change the number of columns once it has been set up? -- for example starting with 3 columns : (tile1 | tile2 | tile3 …
Lyndon
  • 73
  • 1
  • 1
  • 6
5
votes
1 answer

How to drag an element from one gridster to another?

Has anybody tried to drag a cell from one Gridster to another? I have been trying to get that working.. but with no luck. Any help please?
Vaibhav Pingle
  • 575
  • 1
  • 9
  • 27
5
votes
1 answer

emberjs event for when model changes

I have an emberjs app that is structured very much like the sample here: https://github.com/tildeio/bloggr-client The question I have is that when the user clicks on a 'post' on the left, is there any event I can subscribe to in the post…
Ben
  • 16,124
  • 22
  • 77
  • 122
5
votes
2 answers

setting minimum width and height for each gridster.js widget

I'm using gridster.js combined with Jquery UI to make it resizable by dragging using this bit: $('.layout_block').resizable({ grid: [grid_size + (grid_margin * 2), grid_size + (grid_margin * 2)], animate: false, minWidth: grid_size, …
BarakChamo
  • 3,321
  • 5
  • 30
  • 38
4
votes
1 answer

Adding Gridster widgets with different color

I have JavaScript code that uses Gridster to load widgets. Every time I add a widget with the "add" button, it loads in default color as defined in CSS (blue). I want to load widgets with different colors. I want to give user a choice of color (a…
Rookie_123
  • 1,975
  • 3
  • 15
  • 33
4
votes
1 answer

Altenative to Gridster

Im trying to find a similar solution to a auto-resize grid system like gridster. Basically i am creating a grid/dashboard/table system where i receive a dynamically structure of elements like…
DaSilva
  • 1,358
  • 1
  • 19
  • 42
4
votes
3 answers

how to get new col and row on drag stop event in gridster

I am having gridster widget i want to have new col and row after dragging the widget i have written code in drag stop event but it is taking by default 1st li only can any one guide me how to make it dynamic and get for the li which is…
user4361326
  • 51
  • 1
  • 5
4
votes
3 answers

Gridster.js draggable div with content

There is a known issue with gridster that if you have content inside your drag handle, you will not be able to drag with it. I got a response from the creator saying use ignore_dragging to handle this, but I have tried it for a few hours now with no…
ajmajmajma
  • 13,712
  • 24
  • 79
  • 133
4
votes
2 answers

How to forbid gridster to move widget element down

All board is filled by widgets, without margin. And when i try to move element from one column(1) to another(2) the elements at column 2 just go down out of the board like: I'd like to forbid placing a widget to a place if there is no place for…
Aleksander Korovin
  • 349
  • 3
  • 15
4
votes
5 answers

How to remove a single widget from gridster.js by his dynamically created id

I need to know how can I remove a single gridster.js widget by his dynamically created id with gridster.add_widget. Every new widget created has an own button to remove that single widget, but I can't make it work. Here is my…
iamrobertsillo
  • 41
  • 1
  • 3
1
2
3
…
18 19