hootsuite / grid Goto Github PK
View Code? Open in Web Editor NEWDrag and drop library for two-dimensional, resizable and responsive lists
Home Page: http://hootsuite.github.io/grid/
License: Apache License 2.0
Drag and drop library for two-dimensional, resizable and responsive lists
Home Page: http://hootsuite.github.io/grid/
License: Apache License 2.0
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.
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.
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
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
ordata-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.
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
.
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
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...
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?
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.
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?
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.
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
Hi, I wanted to ask how to integrate this plugin to angularJS with ng-repeat? thanks!
So we can synchronize the gridlist with data coming from databinding frameworks like Angular, Vue, Knockout, etc
Items need to be added and removed to a GridList instance without instantiating a new one whenever such action is needed.
hello,
how can one drag a block and switch it with another block only once?
what about events like, onSort?
thanks
Hi, Great work , are you planning to support right-to-left direction?
It'd be nice to be able to define the item selector in the jQuery plugin (vs. a hardcoded "li[data-w]")
http://ubervu.github.io/grid/ doesn't seem to work in IE9
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?
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!
In order to extend and add feature on top of the GridList lib, the primitives need to be solid and unbreakable.
Update README
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.
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):
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
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:
A solution is to clear the extra properties on the destination. We can do this by doing two iterations over the properties:
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.
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.
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?
Why does the grid demo not work in IE8?
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!
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.
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
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
Horizontal grid is not responsive on mobiles and tablets in portrait mode.
For the rest, great plugin!! :-) 👍
I compared your grid with gridster, your grid is very smart, also has a Good performance.
But It has 3 important features Unrealized
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!
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.
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:
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.
A common usecase is to group N columns into a page or a section entity (see Win8 dashboard)
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.This needs to be approached in two places:
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,
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?
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?
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
I also need to save layout I am calling
Thanks in advance.
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!
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?
It would be nice to also have the possibility to dynamically resize the blocks via drag
Any "clean" way to disable drag and drop in all the elements?
Thanks!! keep up the great work.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.