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

not sure how to use gridster.serialize() with Gridster jQuery plugin

I've just started using the Gridster jQuery plugin and I'm having trouble using gridster.serialize(). According to the site, it is supposed to create a JavaScript array of objects with positions of all the widgets, ready to be encoded as a JSON…
aadu
  • 3,196
  • 9
  • 39
  • 62
4
votes
2 answers

jQuery Dragable and Resizable conflicting

I'm using the Gridster Plugin(http://gridster.net). I found an updated demo at Github of this which is resizable. I have also added the jQuery livequery plugin in order to go well with the future items. After adding new grid items, either…
user1915190
  • 307
  • 1
  • 2
  • 14
4
votes
2 answers

Howto use Gridster with div (not ul)

I'm trying to use Gridster, the jQuery Drag & Drop library. However, my HTML has a structure as in this JSFiddle ( http://jsfiddle.net/twashing/4xc6s/5/ ). And I can't get gridster to work. Ie, drag & drop behaviour doesn't happen. My HTML…
Nutritioustim
  • 2,686
  • 4
  • 32
  • 57
3
votes
0 answers

Trying to Print Gridster Items to PDF without overlapping contents

I want to print gridster items to pdf using chome browser. Unfortunately the item overlaps on next page. Is there any way to make gridster item go to next page if it doesnt fit in the current page when printing to pdf? Screenshot
Yakitate
  • 81
  • 1
  • 5
3
votes
1 answer

Gridster not adding widgets where I want

I have the following code which works when I add widget to (1,1) correctly but when I use the (row, col) as (2,2) it adds the widget to (1,2). What am I doing wrong? gridster = $(".gridster ul").gridster({widget_selector: "li", widget_margins: [5,…
Ram
  • 325
  • 4
  • 22
3
votes
2 answers

Use Gridstack or gridster for widget layout?

I'm trying to choose a widget layout and I have come across: gridstack: http://troolee.github.io/gridstack.js/ gridster: http://gridster.net/enter link description here Any one used these before who can share the pros and cons and features?
Somayeh Ghazvinian
  • 142
  • 1
  • 3
  • 17
3
votes
1 answer

Widgets with different dynamic content (angular-gridster)

I am trying to create a web dashboard based on angularjs with angular-gridster module. The gridster works fine and I don't have any problems binding content to it (like text or images with ng-bind-html). But in fact I don't want to add only text or…
cheppert
  • 53
  • 1
  • 4
3
votes
0 answers

How I get real number of columns in gridster?

I want to get the real number of columns in gridster. The number of columns is changing depending on resolution of the browser. My target is, to set a widget on maximum width. The option max_cols returns not the real number of columns. My current…
stappi86
  • 31
  • 3
3
votes
1 answer

Gridster.js with 100% width

Is it possible to make gridster.js have 100% width for the canvas (not the grid elements but the canvas itself. This would have to update on resize. I saw the width: "auto" property but I'm not sure if it's doing anything in my fiddle, but in any…
parliament
  • 21,544
  • 38
  • 148
  • 238
3
votes
1 answer

Gridster widget sticks to mouse when scrollbar inside widget is clicked in IE

I have some gridster widgets on my page. Within my widgets I have a div that has an overflow-y set to true. In IE, if I click the scrollbar inside the widget, the widget will stick to my mouse and I have to right click to drop it. This is not an…
Taylor Devereaux
  • 125
  • 1
  • 7
3
votes
1 answer

Not getting gridster serialize data after resizing the boxes

I am trying to get serialized data after changing the size and position of boxes. But I get the on load details only. How to get serialize data after resize the boxes. And I also want to get the text(value in the box) of the box. This is my code: …
Venkata Krishna Reddy
  • 642
  • 1
  • 9
  • 18
3
votes
1 answer

Draggable DIV (with gridster.js) and inline editing not working

I want to build a draggable grid with gridster and want to enable contenteditable = true in every draggable DIV. But at the moment I'm just able to drag the DIVs around, it seems that gridster.js is overruling the click event or something, so the…
John Brunner
  • 2,842
  • 11
  • 44
  • 85
3
votes
3 answers

Gridster add_widget is slow

I want use Gridster for my web site, but i need to add lot of widgets with "add_widget" command. I do a test and i think there is a problem with "add_widget" function : grid is more and more slow and there are memory leak. You can see that in this…
user944696
  • 61
  • 1
  • 7
3
votes
1 answer

Target certain CSS Classes with Gridster Plugin

I'm using the Gridster plugin, where columns width are defined like this: [data-sizex="12"] { width: ... } [data-sizex="11"] { width: ... } [data-sizex="10"] { width: ... } .... I have 2 questions about this; What kind of CSS classes are these? I…
user1915190
  • 307
  • 1
  • 2
  • 14
3
votes
6 answers

How do I avoid a click event firing after dragging a gridster.js widget with clickable content?

I'm using Gridster (http://gridster.net/) which able to drag the content inside the li . In my li there is a clickable div.
  • content
    …
    • Nich
    • 1,112
    • 1
    • 14
    • 29
    1 2
    3
    …
    18 19