dustmoo / gridster.js Goto Github PK

After doing a fresh clone of the repo, I noticed that you can't build the project via Grunt for a number of reasons to do with grunt-jslint:

1. grunt-jslint is not a development dependency in package.json
2. grunt-jslint causes building to fail miserably, with over 100 errors
3. There are no qunit tests, which is killing the grunt command

Should we remove these problems to make development possible, or am I missing something?

For some reason when I add a widget to my grid, it pushes the existing widget(s) in that column to row 12 leaving row 3-11 empty (in case of a 2 row widget). If I then add another one, then new one pushes the previous one to row 12 and all the existing ones shift below that, keeping row 3-11 empty. When I move one of the lower widgets, it will snap back up after release to row 3.

I don't think I have had this problem before, but is there a way to trigger a reposition of the all the widgets so that they will shift upward to cover the empty rows?

When I do a remove_widget, gridster will still work but generate a lot of errors and glitchy behavior.

Uncaught TypeError: Cannot read property 'row' of undefined lib.js:62651
fn.move_widget_up

Which I believe is fired in clean_up_changed, upon overlapping when dragging. Anybody else is having the same behavior?

Hey Dustin,
Are you still the current maintainer, or have this project switched hands again?

I'd like to use Gridster for one of my first Javascript project, but at this point I have a little problem.
When I add a widget in my Gridster, he doesn't go where I want, here a jsfiddle of a sample of my project.
When you drag and drop in the drop zone, the widget is created, but not at the good position, like he wasn't in the grid. When you move it manualy he goes in the grid. When you add a new widget you can see he is behind the first one if you let him in the first column and row.

What can I do to fix this ? I'm new with Javascript, and sorry for my bad english :)

The origin repo can auto arrange widgets for me if I set all widget's attribute data-row and data-col to "1", but this fork seems broke this feature.

One of the features Iiked about the original gridster over other available choices was that it didn't swap the grid items left to right, but only moved existing ones down. I would love the ability to set an option to disable the left-right swapping and restore the original functionality.

this really would be a great feature...

http://jsfiddle.net/mKKXz/2/

create grid with max_col 1.
Click 'add widget' a couple of times. Notice that the widgets will be added in columns that exceed max_cols. You won't be able to swap a widgets if they are in a col < max_col with one that >= max_col but you can move the widgets that are in the invalid cols to the ones that are in the col.

See jsfiddle for examples.

I would like to point out the same issue found on the ducksboard gridster list of issues which wsa pointed out by benmonro - ducksboard#193. Take a look at the issue link which explains in depth the issue.

Is there a way that this can be introduced whereby one would not be allowed to leave vertical spaces, similarly to how one can currently leave horizontal spaces between grid items?

Thanks a lot for your help!

I am trying to make several widgets on one page (i.e. https://gist.github.com/antonkulaga/5575690 ): central widget, sidebar and bottom menu. So everything like in many gems where you have several slots and some of them have position: fixed;
The problem is that all gridster widgets disturb and interfere with each other. For instance when I assign some params there they are applied everywhere and not only on selected widget panel.
Are there any solutions for several widget panels?

P.S. I am not sure to what gridsterjs I should write about the issues. I see both of them (official one and your fork) are not very active and are still incompatible with each other, currently I use yours because it looks better but I suspect the official one has the same problems with many widget panels.

i've previously created a test page with the original gridster script and tried to replace the script reference with your fork - my test page does not work anymore.

can you please give me a small test / demo example?

I am using grister as follows and would expect to get an extra row - but that does not happen.
(With "extra row" I mean getting a second, empty row with no data in it - which I guess ultimatelly would mean that the height of the ul is increased by the the heigt of an extra row)

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

$(".gridster ul").gridster({
widget_margins: [10, 10],
widget_base_dimensions: [wid_base_dim_x, 200],
min_cols: 1,
extra_rows: 1,
max_cols: nrOfCols,

http://gridster.net/ not found

i dont know if you notice but there is a "closable" true/false variable in my code, because i added

if (closeable == true) {
    var closeButton = "<span class='close'>&times;</span>";
} else {
    var closeButton = "";
}

in my code and i thought maybe it would be cool to feature something like this inside of gridster instead, same goes for resizing functions.

When setting up the 'sample' project with these given properties :
widget_margins: [10, 10],
widget_base_dimensions: [140, 140],
shift_larger_widgets_down: true,
max_cols: 6,
max_rows: 3,,
the property max_rows is either not repected at all by the code, or glith the interface.

No error or warning in the console, I think this problem is caused by old code.

Picture showing that the 'max_rows' option is not respected :

Picture showing the glitch obtained somtimes obtained by dragging some widgets with the 'max_rows' option set :

Hi,

I have the following issue - I have a page and some gridster widgets on it. Their positions are saved in a database so that the next time a user opens the page his widgets are in the same place as he left them (I am saving a widget's position, size and element id in a database). What I am attempting to do is display all widgets and then re-position them. I managed to set their position using the dataset property of the widget, but the gridmap is not updated which leads to problems with dragging the elements.

I managed to get a somewhat working version by removing all the widgets and then adding them one by one with an updated position, however the performance is abysmal and there should be a better way. I even tried extending the code so that the gridmap can be rebuilt from scratch, but to no avail. Please advise if there is a better way on achieving this functionality.

I've added 100 widgets with the add_widget method.. works like a charm.
The widgets to the top are sortable as expected. no problems here.

But after row 16 (in my case), the widgets are indeed draggable but not droppable anymore. There is no placeholder calculation. its draggable but the grid has no response.
After dropping the widget, its moves back to the old position.

To the top its fine at all, no bugs or errors. The generated html looks good, too.

Has anybody an idea for this weird issue?

I think code examples are not necessary, since everything is actually working (before row 16).

thx for any help...
Joscha

After npm installing gridster and trying to require the module within my browserify build. Node.js throws an error, saying that it can't locate the module. And that is because an index.js file is not defined.

Hi Team,
I'm facing an issue while adding an widget to the gridster, coordinate values what we are passing to add_widget method is getting replaced with the other value, this is happening because can_go_widget_up is returning an value even we have a widget on top (it should give only when there is space for the widget to fit in).
Here in below screenshots, the widget-5 is floating on widget-1, when we change the machine scaling beyond the recommended from display settings and zoom Out the browser

Image with Floating when system is scaled beyond recommended and browser zoom out to 67%

Image Without Folting and without any scaling and browser zoom

Note: This is happening when we zoom change the machine scale value from display setting, and zoom out the browser

Module no more mantained right?
we should switch to: https://github.com/troolee/gridstack.js

Does this fork support of auto-height for box based on content?

so i found out what i wanted to tell you in the other post, i added a

this.init();

at row 1013 (in my copy of the file) just before

return $widget;

it reinitializes the grid after repositioning a dynamically added widget, so it wont crash the grid after certain movements.

A suggestion on minor improvement: Adding "disabled" class to grid wrapper when grid instance is disabled. This feature can provide convenience in many aspects, e.g., cursors for disabled grids can be controlled by css without writing javascripts.

Need to fix/optimize for latest versions of jQuery.

gridstack.js was originally created from gridster but has evolved a lot in the past 6 years....

https://github.com/gridstack/gridstack.js

This is useful in having a flexible grid.

This is kind of happening with the bug here:

#2

However it isn't deliberate. There should be an option to change this behavior.

Hello
I try to do this tutorial with dustmoo :
http://maharshi-singh.blogspot.fr/

it work with ducksboard but not with dustmoo.
what do I need to change to make it work?

thanks

for some reason the first column does not seem draggable. I am using jquery 1.10.1. First column widgets, for me, will move when i drag a widget to that position, but that is it

Whatever I do, I keep getting this error when using gridster:

undefined is not a function

I've even copied exact full code samples from websites and try to run them and I still get the same error. Is this a known bug with latest on master?

Does Gridster support the feature to be responsive based on the size of the screen. If yes, how can I do that?

http://jsfiddle.net/mKKXz/2/

Add a grid, max_col 3
Add some widgets.
Notice everything works swimmingly.

Add a grid, max_col 2
Add some widgets
Notice that you can no longer sort widgets in col 3 of the first grid.

If you were to add a grid of max_col 1, you'd no longer be able to sort col 2 or 3.

Maybe I'm just doing it wrong?

Thanks for any insight.

- Mike

Is there any other documentation besides the included sample?

Specifically I'm looking for some pointers on how to add and remove widgets and how to implement the serialize function (to store the widget positions).

The image below shows the issue that I am observing while running the application on iPad. The white boxes are created using the gridster.js library and are draggable. The issue is that on a desktop the boxes appear on the screen completely where as on iPad, they slide in from the right. Some times they get stuck on iPad and are not able to slide in completely. The image below shows the gridster grid being stuck while sliding in from the right.

Is is possible to disable this "slide in" behavior on iPad and ensure that the gridster grid loads completely rather than getting stuck?

Currently in gridster when you move items around, the items around it will gravitate to the up to either the next closest item or the top of the grid. However, you do not see this behavior horizontally. i.e. if I have a 3 x 3 grid and I Move all the items in column 2 into column 1, column 2 stays empty. Yet if I move an item in row 1 column 3 into column 2 or 1, then all the items in column 3 shift up by 1. Is there a way to make gridster behave the same way in the vertical axis as it does in the horizontal access? i.e. have everything in column 3 stay here it was?

For example if i have the widget with a static class in 5,5 coord with size 1,1 and i drag another widget under this widget, than the static widget goes on top.

draggable: {
items: ".gs_w:not(.static)",
}

How to change this behaviour?

Hi Dustmoo,
First of all sorry for my poor english...
I'm trying to add a new feature : the ability to have an attribute for each widget to tell him to refresh or not.
I explain :
For instance a datepicker widget who refresh the "metadata" and if other widgets have the onMetaDataRefresh attribute to true the refresh themseleves without reloading the whole page.

Do you understand what I mean ? and do you know if a such feature have already been done ?

thx

Alex

@rwoody,

Thanks for your help and contributions. The purpose of this issue is to get you up to speed on what I have/haven't done. A few issues on the forefront of my mind, and hopefully to bring you up to speed with things that I had to discover on my own. I will update this more as time allows. Please forgive the wall of text and read at your leisure.

The fork.

I primarily built this fork so that I could use gridster in a backend print production system that I built, that does page layouts by a grid. I needed gridster to be able to swap tiles rather than just push them down. I also had a need for static widgets, so those are primarily the features that I focused on in this fork. Other features requested by gridster users, like resizable widgets and other uses were not not my radar and have not yet been prioritized.

What I discovered through this process was that the original authors did not imagine a scope outside the original library and the script needs more work in the flexibility arena.

The main issue is the gridster does not keep track of widgets in the way you would expect. It only keeps track of the top-left grid location of a widget. After a widget was moved or placed, it would only concern itself with that top-left spot and then determine the width and height and push other widgets down.

The default situation in this script was to push widgets down in almost all circumstances, this made it hard to make the above changes.

Anyway, I pretty much completely rewrote the set_player method to first detect the size of the player, then the size of the widgets in the area you were moving it too. If the widgets where you are going are smaller than or of equal size to the widget you are dragging, it queues and then swaps the widgets to available slots to where you are moving from.

There is basic checking to make sure all the widgets will fit before a swap is initiated. In the case of larger widgets, if you disable moving large widgets down then no swap or movement occurs. If a widget is static, it is also ignored.

I added methods for better detection of whether or not we could move a widget to a specific location before it was moved.

I, however, only integrated these methods with the new swap behavior and much of the script has no knowledge that these exist. Generally, better handling needs to happen before widgets are moved up or down.

For example, static widgets do not work when other widgets can move down, because the script can't tell whether or not there are any static widgets below that should prevent the behavior of moving down. If you use the built-in method for finding the widgets "under" or "below" on the page, the script only transverses down the columns representing the width of your starting widget. If it encounters a widget that is wide enough to jut out into the next column, the method does not expand to take into account what is below that widget etc.

Other than essentially refactoring all the movement behavior, there are other upgrades and fixes that need to be done.

There are cased (many documented in the other gridster) where widgets will overlap. This is because in many places in the script widgets are moved up or down without any validation as to whether they can move up or down.

All movements should really be handled by the same queue so movement can be validated and managed in one place.

Of course, there are the 100+ issues in the original repo that need to be addressed. :-/

Anyway if you have any questions, ask away. I'll try to add items here as I think of them.

Thanks,

Dustin

drag one widget into another

How can i enable horisontal flip tiles while moving it?

how to make auto height when the grid item will dynamically add element

Hello,

Im trying make a dashboard with gridster, but Im having some trouble with resize.

When I resize a horizontal widget, the last get overlap.

Here is the files:
http://muriloreinert.com/gridster.zip

Thank You

Murilo Reinert

This is awesome, thanks for the great work.

I've been playing with it, but the documentation isn't very detailed. I'm wondering if there is an option that lets me switch to the default gridster drag mode vs the (great) swap mode that I'm working with now.

Maybe you could add a line in the readme detailing exactly the functionality that your fork offers (and maybe does not offer)?

Thanks

This could lead to memory leaks since the Gridster init() method registers a resize event handler on the window object. Since it is never unregistered, instanciated Gridster objects can't be correctly GC'ed.

Hello,

Gridster looks awesome, but I need a feature to make it perfect.
I want it to help me create responsive designs using Foundation framework.

Foundation is working on a row-basis, so I need to declare rows, then cols.
Actually, items can be on multiple rows, and that can't be reproduced on Foundation.

So I look for a way to force the items to be on one row :

Any idea about how I can do that ? Do you think it will be hard to code ?

Thanks !