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

Call Gridster multiple times

I love the drag and drop concept of Gridster, but I have a dynamic set of tiles that changes depending on live updates from Meteor. For example, lets say I have a Tiles array in a User model. When the Tiles array is updated by Meteor, it is hard to…
HGandhi
  • 1,586
  • 2
  • 14
  • 27
-1
votes
2 answers

Gridster JS Performance Issue

I've been struggling to figure out why GridsterJS is running so slow for me, I have a much larger project using gridster and performance is so bad I can't drag or resize any widgets on the page. I was shocked to see a much much slimmed down example…
Dan C
  • 35
  • 3
-1
votes
1 answer

When someone uploads an image, I want to add that image to my Gridster gallery - how do I do that?

So far, I've got my gridster gallery working just fine, but only if I specify the file location in css. I would like users to be able to upload images, and they are automatically added to the gallery. I have a foreach which provides me with the…
user3548182
  • 13
  • 3
-1
votes
1 answer

How to create a dashing like widget object in javascript

I am trying to create a widget/tile object to display on my page. Basically its a rectangular box with a background color which I would like to display some text in. To be specific I want to create widgets like the ones in dashing (dashing.io). I am…
sam
  • 1,280
  • 2
  • 11
  • 20
-1
votes
1 answer

How to Position Divs into a Grid according to a JSON Array of Objects with Height, Width, Rows & Columns Properties

I am creating a grid and I need to append items into it from an array of Javascript objects. The grid
simply a div container which needs to have 4 columns and infinite rows (to accommodate a varying quantity of objects that may be…
ac360
  • 7,735
  • 13
  • 52
  • 91
-3
votes
1 answer

Display a grid in html

I now have the code that generates the grids. This task will be completed for 10 minutes, e.g., and participants will be asked to answer as many questions as possible. each time they enter an answer for the number of shaded squares in the grid, a…
Juliana
  • 1
  • 1
1 2 3
…
18
19