dsmorse / gridster.js Goto Github PK

For some reason the vendor/ directory is not bundled in the gem right now.

If you have a widget size of say 100x100 and you make the widget 5x5 (so total dimensions is 500x500) then you shrink your browser down to ~300x300, the autogenerated style sheets cap the width at the size of the window causing the widget to become 300x300 rather than the request 500x500.

Perhaps this was a design decision made early on? I'm not sure why I'd want this to be the way the grid functions..

https://www.dropbox.com/s/c4z2fs6qkl5t649/Gridster%20widget%20init%20size%20issue.mp4?dl=0

In my project, I want to change the "Z-index:10!important" to "Z-INDEX:10",no "important",but I don't know why you set this to important. So can you tell me why you set this value?

Hi ,

We used gridster to move/swap the control on a plane UI , under ul & li. Now we are using "KendoTabStrip" and we have the controls inside the tabs. Now the controls that used to move earlier using gridster are not moving now once we started using Kendo Tabstrip.

We need to move the controls (i.e. Drag drop the controls within a Tab of Kendo UI Tabstrip.)

Lets take we have 2 KendoGrids and 2 KendoCharts within a tab of Kendo Tabstrip ,that needs to be swapped their position.

My question here is does gridstster supported on Kendo UI platform. If possible can I gat a sample for the same.

Thanks,

May i draw your attention towards the following issue from ducksboard..

ducksboard#107

..seems to be quite important

Hi,

i did not find a example in the demos, which allows the exchange of widgets between multiple gridster instances. Is this already possible. A hint would be great.

For better understanding:

I want to implement a kanban like board that allows dragging tasks to different status lanes.

Thanks!

Hi ,

I'm using gridster and in the DIV there is HTML5 Canvas element .

Every time i resize i'm changing the canvas size according to the DIV but when i resize the widget in the
last row or any extra row the CANVAS and Gridster collapsed and the widget is blank.

The same sympthoms like this :

Resizing bug on bottom displayed grid elements · Issue #53 · ducksboard/gridster.js · GitHub

Any ideas ?

Thanks,
Arie.

when I have dragged one element, I will want to know the whole position of the grid. But the serialize_change function can not fix my problem.

I`m korean. I do not speak English very well.
Some use Google Translator ^^;;;;

I am using girdster during the project.
I am thankful to you.

But i have a little problem.
Version 0.7.0.
Drag drop does not occur same size widget.
Different size Drag drop fine.
It version 0.6.9 works well.

Thank you for your plug-in.

I know this is not the first goal of this plugin but do you know how I could add an option to make some widgets 3D stackable with the control of the z-index, like in this example:

If it is not possible with the available options can you lead me in the right direction to add this feature ?
I believe an attribut in the widget could override the check "is there any widget in this (X,Y) position ?" but I do not know yet how this check works.

Users can visit my tool and add widgets to their dashboard. Those positions are then stored in the database with that widget for that user.

When I re-render their dashboard, I am manually creating all of the divs and applying the data attributes to the widgets for their x,y sizes and row,col sizes.

Once these have been appended, I then run gridster and let it do its magic. I have noticed that even though the values are stored and loaded correctly into each widget, they are getting shifted around at times.

If the elements are getting these values data-row="1" data-col="1" data-sizex="1" data-sizey="1" from the database directly, what is gridster actually doing when its initializing their position?

The x,y size always seems to be fine but the row,col seem so move on their own even though they have a defined value.

This is my code (coffeescript):

updateElements = =>
      changedElements = @gridster.serialize_changed()
      console.log 'Changed elements', changedElements
      #...


@gridster = $(".gridster ul").gridster({
      widget_base_dimensions: ['auto', 140],
      autogenerate_stylesheet: true,
      min_cols: 1,
      max_cols: 12,
      widget_margins: [8, 8],
      serialize_params: ($w, wgd) ->
        return {
          col: wgd.col
          row: wgd.row
          size_x: wgd.size_x
          size_y: wgd.size_y
          id: $w.attr('data-kpi-key')
        }
      resize: {
        enabled: true
        stop: updateElements
      }
      draggable: {
        stop: updateElements
      }
    }).data('gridster')

I check changed elements on two events: resize.stop and draggable.stop. Then in the callback I call .serialize_changed() function to see which elements have changed after the resize or drag. This is all done to persist the grid of my widgets into the database upon any change.

When draggable.stop event occurs the serialize_changed() functions correctly returns all elements that have been relocated. However, on resize.stop event it doesn't always work. When it was only the resized element that changed (no other elements moved due to the resize) - the serialize_changed() returns [].

I tried to dig it up but so far I can only found that there is:

fn.on_stop_drag = function (event, ui) {
  ...
  this.$changed = this.$changed.add(this.$player);
  ...

but not in fn.on_stop_resize

I will continue looking, but perhaps it is me doing something wrong? I can of course just use serialize() method and reupdate all widget positions in the database, but I would prefer updating only changed ones.

One more thing - it seems that array of changed objects persists between changes. So, basically, it only grows when there are more and more changed elements.

Is this package available via npm. When I say npm install -i gridster, I am getting the original version of gridster. Please let me know how to install this via npm or alternative ways to use this in webpack.

So we have a month old version of Gridster where we gutted fn.on_stop_overlapping_row and just have a return statement and also removed this.can_go_player_up from fn.set_player (commit was :ericop@c331dfc) . This allowed for placing widgets anywhere, and having rows of white space so that "anti-gravity" didn't force them to slide up after they're placed. In the current version (0.6.8) this little trick doesn't work - widgets aren't even draggable actually after i tried a merge - but do you know of an official way we could "turn off" the anti-gravity with a options.autoup: false , etc. ? Thoughts?

I really appreciate your take this project over. It's super fun and "has good bones". I'd love to see it kept alive and strong for a long time to come!

Hey,

I'm currently developing a tool with gridster JS in it. When I have 2 sticky elements with space between them and I remove the one above the other one will pull up to the top automaticly. Seems kinda buggy.

Anyone know a fix?

KR Xarf

There does not appear to be an example of limiting the grid size in terms of max number of columns & max number of rows.

How would I got about limiting the maximum size of the grid (in terms of columns/rows, or even just in terms of max height/width pixels) ?

If avoid_overlapped_widgets is true (default), widgets that overlap result in some widgets being dropped from the DOM. A better behavior would be for the losing widgets to get added to the bottom.

Example options:

var gridsterOpts = $.extend({}, {
    widget_margins: [widgetMargins, widgetMargins],
    min_cols: 3,
    max_cols: max_cols, // Needs to go depending on the dashboard defs
    max_rows: 40,
    widget_base_dimensions: ['auto', 30],
    shift_larger_widgets_down: true,
    autogenerate_stylesheet: true,
    serialize_params: this.widgetSerializer,
    avoid_overlapped_widgets: true,
    shift_widgets_up: true,
    resize: {
        enabled: options.canEdit,
        start: $.proxy(this.widgetResizeStarted, this),
        stop: $.proxy(this.widgetResizeStopped, this)
    }
}, options);
this.$el.gridster(gridsterOpts);

The referred website for the documentation: gridster.net seem to be incorrect and pointed me to phishing website. You probably should remove references of it from the README and Github description.

Is it possible to define a specific width for a row or column so that we can create grids not bound by the current system of identical heights on rows and widths on columns? I'd like to be able to have rows shorter or taller than others and some columns thinner or wider than others.

I used this new feature to be able to place widgets anywhere in my canvas and it works fine in most cases. Where it fails to work is when I put more than one widget in the same column (col A) and I move the upper widget from that column to another column (col B). In this case gridster shift up the remaining widgets in col A.

I will submit a PR with the proposed correction.

When using the option collision.wait_for_mouseup: true combined to the option shift_widgets_up: false we are able to stack several widgets in the same cell.

To display hierarchical structures as nested tiles, with the ability to drag and drop tiles. Completely analogous to the tree, only tiles instead of nodes .

These two images below show the issue.

Steps to reproduce:

1. Open http://dsmorse.github.io/gridster.js/ page.
2. Drag tile with "drag me" text down to see placeholder. Don't release it.
3. Drag this tile back to initial position.
   Result:
   Placeholder does not show up (see screenshot).
   
   On tile release it moves to position under initial
   Expected behavior;
   After step 3 placeholder appears on tile initial position and it is possible to return tile with text back.

When then grid is configured in responsive mode, changes in the browser dimensions result the widgets to have their size recalculated, but it does not broadcast the event, so objects in the widgets do not get notified.
Manual re-sizing does broadcast events

I'm working on issue #30, but when I fork the project, latest version of distributed jquery.gridster.js do not match latest release

Latest version has last modification v0.6.10 - 2016-01-21
Latest release has last modification v0.6.10 - 2015-05-31

Should we update the latest release?

When reordering with a max_rows widgets still get added to the bottom, instead of being moved in between.

Is there a simple way of making gridster static - as undraggable and un-nothing, basically just keep the positions and sizes? I could just reproduce the ul element with the serialized data without calling gridtser, but I need to use the resize_widget_dimensions function. Thanks!

Hi,

I am using gridster for an internal project.

I need my widgets in the grid to be added at different locations. I am using shift_widgets_up as false and this works nicely.

The only issue I have is that when I drag a widget, it doesn't allow me to add it at just any place. It does some calculations and seems to create a distance of smallest widget size and widget-margin between itself and its closest one. I just want to add the widget below another widget with a little more distance than widget-margin.

Is there a way to add widgets to any place beyond widget-margin?

Any help will be very useful.

Best Regards,
Bharat

So I've been working with Twitter typeaheadjs (https://github.com/twitter/typeahead.js) and found that it was abandoned but that a group has recently forked it (see twitter/typeahead.js#1320).

I would sort of like to see an organization where Javascript projects which are abandoned and forked live. Together they could raise each other's profile, and a fork like this needs a higher profile.

I thought of gridster.js which was also abandoned. It was kind of hard for me to find this fork. Throwing it out there:

https://github.com/corejavascript

Let's set up a proper rails gem, based on this repository.

For some reason for me doing require('gridster') is just returning the actualy function and not the gridster object.. whats up with that?

CommonJS support is present in the library, and the dist/jquery.gridster.js file contains lines like require('./jquery.draggable.js'). However, the jquery.draggable.js file is not present in the dist folder, since it is concatenated into the main jquery.gridster.js file. The result is that Browserify cannot include this library.

Two possible solutions:

1. include src directory as an exception in .npmignore, so it is fetched via npm install
2. fix the CommonJS support to only require jquery in the dist folder and do not use relative paths

Attached video shows couple of simple scenarios in which widgets get overlapped. It's easier re-producing this with bigger widgets over smaller widgets. Once it happens the corruption keeps extending.

http://1drv.ms/1gkOwmK

Hi, I'm unable to get this plugin working with browserify. I have updated the package.json file to use the src folder for the files due to it unable to fine all the other files like draggable and collision, etc.. But after I get it required in, I'm still not able to use gridster, i just get call to undefined function gridster. Please help me out.

When the window resizes, at certain breakpoints like 900, 1200, 1600 I want to SET new dimensions for all the widgets at once and for them to relayout left-to-right

If I set them in a loop, the widgets currently in the grid interfere with the widgets I'm resizing.

How do I avoid this? I don't want to "remove" all the widgets and cause a flicker

(I tried using mutate_widget_in_gridmap() and resize_widget() with the new dimensions, both have the same effect)

TL;NR http://1drv.ms/1QBuf7h
How to reproduce it:

1. Make bigger a widget (A)
2. Place another widget (B) above it
3. Move widget (B) away.

Expected behaviour

• Widgets below A shift up.

Encountered issue

• Widgets below A do not shift up

You can reproduce it at the demo page for resizable widgets

The gridster is initialized with

    var gridster;

    $(function () {

        gridster = $(".gridster ul").gridster({
            widget_base_dimensions: [100, 100],
            widget_margins: [5, 5],
            helper: 'clone',
            resize: {
                enabled: true
            }
        }).data('gridster');
    });

I found a few memory leaks in the main branch of gridster, and thought I would send the info here since this one is maintained.

There are two memory leaks issues I found that aren't already fixed in this repo.

1. Saving the result of jQuery calls to map, eq, not, add, appendTo, etc...
   Many of these jQuery calls store a reference the the previous selection via .prevObject . For instance, you remove a widget, and this call happens:

    this.$widgets = this.$widgets.not($el); 

The widget you just removed sticks around in the prevObject array on the new $widgets object. That dom object will not be garbage collected. I believe this affects this.$style_tags as well, and potentially other objects.

2. the faux_grid object is expanded unlimitedly, and is never retracted. For instance, I add a 1 row tall widget. faux_grid grows by 1 to make room for it. I remove that widget, faux_grid stays the same. I add the widget back, faux_grid grows by 1 again. faux_grid is now 1 row bigger than it needs to be. Again this affects applications that add/remove widgets repeatedly. The effect is even more pronounced on the resize callback, because rows are added every time you resize larger, even if it is the same size as when you started the drag.

Possible solutions:

1. Wrap all of those leaky calls with $(). This destroys the prevObject. Or just delete the prevObject property off of the selection

this.$widgets = $(this.$widgets.not($el));
//or
delete this.$widgets.prevObject;
//or
this.$widgets.prevObject = undefined;

2. Add remove_faux_rows and remove_faux_columns functions, and call them when something is resized smaller, and when widgets are removed.

This is a good project. All the functions work fine.

But I found a issue.
When widget moves from point A to point B. It should be able to move back to point A, as there is empty space. But it can't, I have to move to point C first, then I can move back to point A.

Even the demo in your project website has this problem.

Any suggestion?
Regards,
Paul

We love gridster and we love even more your enhancements to make it responsive but I think we've found a bug.

If you open the "Responsive grid width" (http://dsmorse.github.io/gridster.js/demos/responsive.html) demo in a small window and resize the browser window bigger (or maximize it).

If you drag one of the smaller tiles from the left hand size, as you move it right the drop target highlighting gets further and further to the right, and as it's to the right-most side of the screen it's almost a full column out of position to the right.

Sorry, but I haven't dived into the code to try to figure it out but my guess would some of the math isn't quite right when it's calculating the drop position relative to the window scaling.

Steps to reproduce:

1. Open http://dsmorse.github.io/gridster.js/ page.
2. Drag tile with "drag me" text right to overlap right side sibling. Don't release it.
   Result:
   
   Right side sibling does not swap
   Expected behavior;
   Sibling tiles swap on overlapping start.

Our application scenario more similar to this demo
http://dsmorse.github.io/gridster.js/demos/resize-limits.html

If you change the browser zoom/resolution and reload the page, widgets are getting randomly placed though there col,row,x,y positions are hard-coded in the markup.

I don't know if these problems have any connection, so I only open one ticket.
The problem is, in some situations we can't drag&drop like we could have some versions before.
For example this item just cannot be moved one column to the left:

Sometimes bigger items are not moving smaller items away while dragging, making it impossible to drop, and in rare situations you can place items above each other. Lastly, if you drag one item, you can keep pushing another item out in nowhere without limits.
All of these can be reproduced easily on the main page of the official GitHub website (http://dsmorse.github.io/gridster.js/)

Hello, I was wondering if I can add the widgets starting from the bottom of the grid and keep them snapped to the bottom, think of it as the opposite of the current default code, it starts from the top left and snap the widgets to the top, so I want to add them from the left bottom and keep them snapped to the bottom as the gravity works.
Any help ?
Thanks

Hi,

We have a situation where we need to integrate gridster in our Reactjs based application. Can you help us with an example explaining the same?

Thanks in Advance. Appreciate your help

Ey!.

Im using gridster. I was using https://github.com/dustmoo/gridster.js.

I migrated to this version, (currently '0.7.0').

Problem is when I try to load a saved gridster I found this javascript error:

jquery.gridster.min.js:1 Uncaught Error: Not exists property col

My code is:

gridster = $(this).gridster({
widget_margins: [10, 10],
widget_base_dimensions: [130, 130],
max_cols: 6,
min_cols: 6,
min_rows: 10,
shift_widgets_up: false,
shift_larger_widgets_down: false,
collision: {
wait_for_mouseup: true
},
draggable: {
handle: 'span'
},
resize: {
enabled: true
},
serialize_params: function($w, wgd) {
return {
reference: $($w).attr('id'),
position_y: wgd.row,
position_x: wgd.col,
size_x: wgd.size_x,
size_y: wgd.size_y,
id_component: $($w).data('component'),
content: $('#editable_' + $($w).attr('id')).html(),
type: $($w).data('type')
};
}
}).data("gridster");

Any suggestion about what happens?.

Thing is just fail when I unserialize a existing gridster. With new ones works perfectly.

Thanks!

Kind regards.

I've created a gridster with the following settings:

$(".gridster ul").gridster({
                max_cols: 3,
                max_rows: 3,
                widget_margins: [10, 10],
                widget_base_dimensions: [200, 200],
                shift_widgets_up: false,
                shift_larger_widgets_down: false,
                collision: {
                    wait_for_mouseup: true
                }
            });

However when dragging a widget inside another widget that is already on the bottom row, it gets pushed even further down.

Hi I am looking to drag new widgets into a gridster. How do I bind a new widget instance to a jquery draggable event. Any ideas or tips would be great.

Hi!

Thanks for keeping this fork updated. I have a question – What is the difference between regular and -with-extras packages?