hootsuite/grid

Drag and drop library for two-dimensional, resizable and responsive lists

grid's Issues

nesting of gridlist

Great work on Grid :) I needed some help on creating a nested gridlist. Something like http://codepen.io/tannerlinsley/pen/lrpoi

I was able to insert a childgrid into a parentgrid, but the childgrid cannot be interacted with (as in it cannot be dragged).
By the way is there a way to disable dragging feature

bower version outdated

Hello guys, i'm having troubles getting it working with bower, everything works, but there is a problem when i call resizeItem(element, {w:2, h:2}). It is working with the previous version. I don't know what i have to do to use in bower the version 2 of the library.

What jQuery UI components is necessary

For a leaner implementation on users' side, could you specify what components of the jquery UI is necessary for the use of GridList so that we can include only those components

Add support for saving and loading layout

As the API page is unavailable, I do not know if already exists. But what happens after the user customizes the page layout? Is there any way to save this layout and retrieve later?

resizeGrid() and data-x data-y attr location update

Well done with the update the plugin is better then ever man!

I just have one question. I am building a dashboard with dynamically generated

the li will not contain data-x and data-y I am trying to use the resizeGrid() function specified within the README but i cannot get it to work it says function not defined. $('#grid').GridList.resizeGrid('5'); I am using that to call the function.

I also need to save layout I am calling $("#myGrid").data('_gridList').gridList and it renders the array. is there a way to assign data-x and data-y to the dynamilcally inserted li's so these can be saved ? or how can I assign the $("#myGrid").data('_gridList').gridList OBJECT to my

Thanks in advance.

Unable to move cells with iOS devices

As the subject states, I'm unable to reposition cells on an iOS device. Would love to use this in upcoming projects but this is kind of a dealbreaker...

Get data attributes from element in DOM

Currently the data attributes in the DOM are not updated is this intentional for performance?
If so what is the best way to get the current position from an element I only see an internal method: _getItemByElement

Can we change it to either update the data attributes in the DOM or make _getItemByElement part of the public API.

How should add/remove items work?

I know #29 captures the feature request for adding/removing items to the grid . However, I need this functionality (in GridList library only, not jquery) for my use case and would like to know how I should go about implementing this feature myself.

If I can implement it in a way that aligns with the original design of the library, I'm happy to provide a pull request.

JavaScript mode Not working

I"m trying to create a the grid framework using a JSFiddle. The problem is, nothing happens when I do it. Here's the JSFiddle:

https://jsfiddle.net/xrwbybb8/

RTL direction support

Hi, Great work , are you planning to support right-to-left direction?

onlick or onselect even for item

Are there any events available for when an item on the grid has been clicked or selected? I've only been able to find the onchange event for working with items after updating.

Move items programmatically?

Hello,

We bumped into this plugin after checking out gridster & coming to the same conclusion that's unmaintained & thus not really reliable.

I was creating a small POC using this plugin, but was wondering if we can move items programmatically out of the box? I notice the gridclass has the functionality, but not sure if we can call it directly through the jquery functionality?

Disable some items position

Hi, I want to force a position for an item and it should be like an obstacle to avoid when sort other items.

Which method should I modify?

Dynamic resizing via drag

It would be nice to also have the possibility to dynamically resize the blocks via drag

Touchscreen interaction incompatible/inconsistent

I can drag items on the grids all I want with a mouse, but on touch screen devices there is simply no way to easily and consistently drag items around with the code as it is now.

I noticed that with Edge browser, if you hold your touch for long enough, it will start to move but then immediately stop and try to show the context menu. In firefox, you can actually move and tap them! But, you must hold down your finger for a rather precise amount of time before you can move it. And finally, I was only able to get Chrome to work (rather well!) by adding the "jQuery UI Touch Punch" script to the page. Unfortunately, this made it require a very precise 'tap' in order to actually 'click' on the item. This was all tested using a Microsoft Surface 3.

I would like to know if there is any way that a plugin could be used, or a modification to the code in order to make this behavior more consistent across browsers? Any information/suggestions/answers are much appreciated!

Grid does not display in IE8

Why does the grid demo not work in IE8?

Doc error

The default direction of the grid is 'horizontal' as set in https://github.com/hootsuite/grid/blob/master/src%2FgridList.js#L85 meanwhile the doc states that the default direction is 'vertical', which could cause a couple of minutes looking at the source code to find out :)

Otherwise, thanks for the great lib!

We need 3 features

I compared your grid with gridster, your grid is very smart, also has a Good performance.
But It has 3 important features Unrealized

1. Dynamic creation（in codebehind）
2. Drag resize
3. Implement resizing of item height
   Look forward to your improved version，Thank you for your good ideas。

Move item between grids

I want to have 2 grids and allow drag and drop between the 2. It would need to show the "constraints" while dragging over the new grid as well as moving around the preexisting items.

How difficult would it be to add and where should I look to give it a try?

Thx

max_columns

So we'll shortly be looking at implementing a max_columns for grid (we've been looking for grid implementations that have both max_rows and max_columns for a while now :p). How close is it to being implementable? Any tips would also be super useful.

Thanks!

IE9 grid demo doesn't work

http://ubervu.github.io/grid/ doesn't seem to work in IE9

Dynamic space filling?

Hello all,

Very nice project you have here. I have an issue where I have created my own set of 'fixtures' like the ones you used in the demo, and have generated my 'items' from them. I have then written some code which should place them dynamically on the grid without overlapping with any other cells or the edge of the grid.

I am using the 'vertical' format of the grid list.

It's almost there I think, but there is an issue with not filling up all the white space. It is easier to explain with a diagram:

WHAT I GET:                    WHAT I WANT:
+----------+ +----------+      +----------+ +----------+
|          | |          |      |          | |          |
|          | |          |      |          | |          |
|          | |          |      |          | |          |
+----------+ |          |      +----------+ |          |
             |          |      +----------+ |          |
             |          |      |          | |          |
             |          |      |          | |          |
             |          |      |          | |          |
             +----------+      +----------+ +----------+
+----------+
|          |
|          |
|          |
+----------+

My function detects the maximum height of a row and if the row is filled or not - if it is filled, the next row starts below the very bottom of the previous one, regardless of whether or not we can fit it into the previous row.

Is there anything built into GridList that will automatically detect that space and fill it, or will I have to figure it out with my item generator? Thanks!

We need events for sorting, adding, removing, switching, etc

So we can synchronize the gridlist with data coming from databinding frameworks like Angular, Vue, Knockout, etc

Why the id attribute in the grid item is required to be a Number?

The following line: https://github.com/hootsuite/grid/blob/master/src/jquery.gridList.js#L201 transform the id to a number. Is there a reason for the id to be a number?

Responsive in both directions

Is there any way to make sure a certain amount of rows and columns such as 5 columns and 3 rows will always fit the container?

more events?

hello,

how can one drag a block and switch it with another block only once?
what about events like, onSort?

thanks

Document GridList primitives

Need

In order to extend and add feature on top of the GridList lib, the primitives need to be solid and unbreakable.

Deliverables

• Description and data example of each GridList primitive (item, items, grid)

Solution

Update README

Add widget resize method with tests

Will this library support a fixed square grid layout of n items with the centre tile disabled?

I'm wondering if this library will support a layout as presented here using packery:

http://codepen.io/codecowboy/pen/uKIar

A key feature I require is the ability to reorder items and prevent a user dragging a square onto the disabled centre tile.

Remove Drag

Any "clean" way to disable drag and drop in all the elements?
Thanks!! keep up the great work.

Empty col and Disable drag

Hey ! Is there any way to disable dragging ? I would like to make it for non-admin users.
How about inserting an empty col/row and make it stay after reflow/adding/removing rows/cols?

Insert data into grid items like Normal HTML or Highcharts plugin.

This is an awsome repository, but I cant quite figure out how can I input data into each individual grid item like normal HTML. I am building a widget dashboard and would like to include plugins from highcharts. And is it possible to save a layout after you've edited it ?

Thanks you

Integrate with Angular

Hi, I wanted to ask how to integrate this plugin to angularJS with ng-repeat? thanks!

Add insertItem and removeItem methods to GridList class

Need

Items need to be added and removed to a GridList instance without instantiating a new one whenever such action is needed.

Deliverables

• Documented and tested insertItem method
• Documented and tested removeItem method

Grid of RxC

I need modify the grid to allow only drag and drop operations in a grid of RxC, don't extend the grid. By example, initially I have a grid of four columns and five rows (direction: 'vertical'), and when I move an element to bottom, it add a new row, that is wrong for my application. It should adjust the elements in the empty space, not add an extra row. It is possible?
I want a behavior like https://github.com/ksylvest/jquery-gridly

Please add support for vertical grid extension

Horizontal grid is not responsive on mobiles and tablets in portrait mode.

For the rest, great plugin!! :-) 👍

Add unique id and html content?

I suppose this is more of a suggestion. First of all I would like to say this is freakin' awesome. Glad you guys are making this. Would it be possible to tag on a unique id (widget id), and htmlContent type to this? It would work perfectly for something I am trying if so.

Thanks!! keep up the great work.

Add separators for every N-variable columns

Need

A common usecase is to group N columns into a page or a section entity (see Win8 dashboard)

Deliverables

• The jQuery script will receive the options columnsPerGroup (defaults to false) and groupSeparatorWidth (defaults to 50) and will render the grid accordingly. The latter option is ignored if the former is undefined.

Solution

This needs to be approached in two places:

1. When the positioning is calculated based on agnostic grid coords.
2. When calculating the closest grid position on drag

Implement drag and drop behaviour that is more section-friendly

Need

As an user
I want drag in the context of sections with delimiters between them to favour widgets to remain in the same section
So that I have a sense of grouping for the widgets

PS - for the issue about adding delimiters, see #14

Deliverables

• test-cases for the new situations (see fixtures.js)
• pull to left behaviour should stop at section boundary (similar to how timelines work)
• collision detection should try harder to solve collisions within the same section (maybe generate more positions that are adjacent to the colliding widget instead of just 4 of them?)
• users should not be able to place a widget that spans 2 sections on the grid:
  • dragging should snap the widget to one section
  • resizing should make sure the widget ends up only on one section
  • layout algorithm should only place widgets within sections

Finding new position is triggered too late in jQuery plugin when only having one lane

When there is only one lane in the grid, finding a new position for items is triggered too late when using the jQuery plugin. It works fine with the first item next to the one that is dragged, but the second already has a wrong "trigger point" - it looks like the dimensions of the item underneath the dragged one are calculated incorrectly (one cell falsely added).

This only happens when moving an item left to right (horizontal grid) or top to bottom (vertical grid) and not in the other direction.

Here you can see the behavior (please ignore the strange image jumping in the beginning):

Unable to revert position for an empty cell

First all, thanks for the work done on this project. Very helpful.
I have created a grid with an empty cell as below.

#|  0  1   2
 -----------
 0| 00 --  01
 1| 02 02 03
 2| 04 04 04

I try to move the tile at position (2, 0) to the empty cell (1, 0).

#|  0  1  2
 -----------
 0| 00 03 --
 1| 01 01 04
 2| 02 02 02

When I try to revert the tile to its initial position i.e (1, 0) to (2, 1) this does not succeed.
What am I doing wrong? I've already spent a week reading the code but I can't resolve this.

Create tag for each version release.

I can find that there is only a tag for 0.1.0 version. It is difficult for others to download the specific version of this library who are not using npm.

Auto height items in the demo have height 0px

In the index.html demo, widgets with height 0 (which should fill up the entire available height) don't get their height properly calculated.

GridList.prototype._adjustHeightOfItems() checks for either:

• data-autoheight to be true or
• data-autoheight to be undefined and the item height 0.

The problems lies in jquery.gridList.js which sets data-autoheight to false all the time.

Solution

Don't set data-autoheight and let _adjustHeightOfItems() do its thing. If it's not set it will look for the item height to be 0.

How to let one panel display on whole windows to view details and can be back to normal size with other panels

Is possible to do focus on a panel to view details to display whole windows?
After view then back to normal with other panels,...

Thanks,

Positioning issue (vertical)

Do you have any idea what's happening? When i set grid to vertical 7 should stay after 1 2 3 4 5 and 6, as it stays for horizontal.

Item selector config

It'd be nice to be able to define the item selector in the jQuery plugin (vs. a hardcoded "li[data-w]")

Unable to move cells to certain positions

In Chrome 33.0.1750.152, cell dragging does not work as expected in certain situations.
In the following situation, attempting to drag a cell (e.g: 1) to be between one of the following pairs does not work: 3-2, 2-7, 7-6, 6-9, 9-4, 3-5 and 5-10.

How is it responsive?

I don't know if I understood correctly what the README says, maybe I'm missing something, but how the grid would possibly be responsive if the items width and height are based onde the container? Do I have to set a fixed height to the container?

I'm asking because I'm trying to make a few samples and it always appear with the same size, no matter the screen width or height.

Server processing

Hi i read the part about allowing you to run tests on the library in node.
I guess there is currently no way to let the server handle the calculation on the server when using it with real data.
But maybe using that with websockets would be an option?

Autoheight gets applied to the wrong items

Solution

The problem is due to the cloneItems method. When the properties are copied from the source to the destination we don't take into account any properties existing only on the destination.

So what happens is this:

1. Grid initializes, auto size attribute is applied to items.
2. Snapshot.
3. Drag and drop. At this point the order of the items might have changed.
4. Snapshot is copied back. Now the auto size attribute may be copied to the wrong items.
5. Multiple items end up with the auto size attribute.
6. Resize -> items end up being stretched.

A solution is to clear the extra properties on the destination. We can do this by doing two iterations over the properties:

• once on the source where we copy them over the destination,
• once on the destination where we copy them from the source.

The second time will set any extra properties to undefined since they won't be on the source object.

Another solution is to ignore the auto size attribute when copying the properties since it's the only extra property that we add onto the items.