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
17
votes
1 answer

gridster auto height and width according to content

I am adding grids using the 'add_widget' method of Gridster. The widget is successfully added, but the unordered list (ul) width is smaller then its contents. Can anybody tell me how I can resize the height and width in Gridster according to the…
neooo
  • 241
  • 1
  • 4
  • 11
14
votes
4 answers

Make gridster.js tiles stick in specific grid positions (snap to grid)

is there any way to make Gridster.js tile(s) stick, that is not move up vertically to fill empty space. Kind of like the way a layout program with snap-to-grid turned on works...
user265505
  • 409
  • 6
  • 21
13
votes
5 answers

Render Component Dynamically

I have this array: this.dashboard = [ {name: ''}, {name: ''} ] I populate this array on the ngOnInit cycle. I was wondering how can I…
Luca Alberto
  • 1,195
  • 3
  • 11
  • 30
13
votes
1 answer

How can you drag between 2 'grids' in angular-gridster2?

I am using the following: https://github.com/tiberiuzuld/angular-gridster2 I want to be able to instantiate two grids with different 'ids' on the same page, grid1 and grid2. Is it possible to drag one box from grid1 and drop it into grid2? If so,…
Rolando
  • 58,640
  • 98
  • 266
  • 407
10
votes
1 answer

How do I drag a grid from one gridster to another gridster?

How can I drag a grid from one gridster to another gridster? $(function () { //DOM Ready $(".gridster ul").gridster({ widget_margins: [5, 5], widget_base_dimensions: [160, 160] }); var gridster = $(".gridster…
Rachanna Panchal
  • 101
  • 1
  • 4
9
votes
3 answers

gridster c3 charts auto resizing issue

I am facing problem with c3 charts sizing issue with in gridster. Can any one help me how can I make there charts to be properly auto resized according to the gridster box they are in? Please find the Plunker I have given size in options : size: { …
Madasu K
  • 1,813
  • 2
  • 38
  • 72
9
votes
1 answer

gridster, how to auto fit to browser size change?

I'm trying to find a way to auto-resize gridster container. In a way that when user changes browser size, corresponding gridster widgets resized. (In which number of columns and rows does not change, but actual size will) I can calculate the values…
user2205425
  • 117
  • 1
  • 1
  • 10
8
votes
1 answer

how to fix overlapping of angular-gridster items while shrinking

I am using angularjs 1.5.8 and trying to achieve angular gridster layout like this and in mobile mode elements stack below one another. My gridster-options are as follows this.standardItems = [ { sizeX: 2, sizeY: 1, row: 0, col: 0 }, …
user93
  • 1,866
  • 5
  • 26
  • 45
8
votes
1 answer

How to make gridstack auto widgets moving stop towards upward?

I hope that gridstack team will be in perfect health..! I just want to be able that when I move a widget so the other widgets don't go upward direction to fill it's empty place..! Instead more like I want the other widgets to stay at their location…
Umair Shah
  • 2,305
  • 2
  • 25
  • 50
6
votes
1 answer

Generate PDF from web app

I need to generate a PDF from the current screen in my webapp. Some kind of screenshot, but I'm facing serious difficulties. The main problem is that the view contains a grid made with jQuery Gridster; and some "widgets" contain complex elements…
alejandromav
  • 933
  • 1
  • 11
  • 24
6
votes
2 answers

how can a make my gridster responsive

When i resize my browser, most of the tiles go offscreen, and there is no horizontal scroll bar even.May I know how we can make the gridster responsive. Thanks, Balaji.
balaji
  • 774
  • 1
  • 16
  • 42
6
votes
1 answer

On gridster keep widget under mouse during drag

I actually use gridster for drag some items. My container is bigger than my window, so, i have a scrollbar on the right side, as usual. Now, if i want to drag an item from the top to the bottom, I need to click on it and scroll the mouse at the same…
Superdrac
  • 1,208
  • 17
  • 29
6
votes
2 answers

Gridster remove widget by dragging into div

I am using gridster.js and am trying to figure out a good way to set it up where I can drag one of the widgets into a "trash can" like div and have it remove that widget from the grid. If anyone has any thoughts on this that would be great. Here…
klye_g
  • 1,242
  • 6
  • 31
  • 54
6
votes
1 answer

gridster: Can you limit the touchable area of a widget to a specific area?

The canonical use of gridster seems to be one where the entire object can be touched to indicate that a drag operation is to be started. Is it possible to limit that touchable region to a specific area (div) in the object, perhaps indicated by an…
Jim Miller
  • 3,291
  • 4
  • 39
  • 57
6
votes
1 answer

How to drop a draggable into gridster

Does anyone know if it is possible to drop a draggable element into gridster? http://gridster.net/#documentation It seems great for my purposes, but can you add them to the grid by dropping it? I want to drag images into gridster. Is is…
user1261710
  • 2,539
  • 5
  • 41
  • 72
1
2 3
…
18 19