Vue-grid-layout: Questions: Adding & Removing Grid Items + Responsive

[jordangorla]

I have two questions. But first, thank for you this library, really enjoying it.

First Question:
I am writing some functions to dynamically add and remove grid items. I have been able to easily splice out grid items without a problem. When I add new grid items or duplicate they end up taking the same X, Y coordinates and are placed on top of the existing grid item or on another grid item. So when you drag or resize its essentially grabbing both the original grid item and the new one.

Has anyone solved this and how are you managing to add new grid items and place them into an empty spot? Essentially dynamic x and y coordinates to find an empty slot, or at least adding it to the very end.

I am considering some very robust functions that I feel are overkill that loops through the entire grid item array and counts the coordinates to find an open spot but before I wrote any of this I was curious how others have managed to accomplish this desired outcome. I feel brain dead and that im missing something quite simple ha.

Second Question:
I noticed that a ResponsiveGridLayout.vue file exists in the current repository, I tried getting it to work but couldn't. Is this feature not released yet or is there a working version? All is good I have been able to overwrite my mobile issues using css.

Thanks again.

[gmsa]

1. Keep in mind that objects in javascript are passed by reference, so when you create a copy or a new one based on an existing object, you are changing the original. What I usually do to create a copy (if it is a json object) is JSON.parse(JSON.stringify(jsonObject));.
   As for adding to the end of the grid, I don't think there is an easy solution. You can try and do some math to find the item with the last x and y coordinates plus size. I don't have the time to check if it works, but maybe adding an item with very large coordinates (bigger than anything else on the grid) might work, if vertical-compact is set to true.

2. ResponsiveGridLayout was something I started working on to try and implement responsive support, but couldnt get to work the way I wanted to. Its not functional right now. Would love to known about your solution for mobile.

[jordangorla]

Thanks so much man!

1. The making the coordinates a huge size was something I had not realized ha! Thats great thank you, I figured there was something I could quickly do without putting to much.

2. It wasn't anything other than just a quick overwrite, I used SCSS and essentially just made all grid items full width at mobile break. nothing crazy. It works for my use case at the moment, haven't ran into many problems other than I can't resize or drag around, but thats not very important to me on the mobile use.

.vue-grid-item { @media screen and (max-width: $mobile-break) { width:100%; height:auto; position:relative; margin-top:$padding; transform:inherit; } }

I try and keep things are uncomplicated as possible ha.

[gmsa]

cool, thanks

[sejr]

I know this is closed but from a design perspective, I don't think the ability to drag or resize really makes sense, especially on a phone. I am going to try @jordangorla's fix tomorrow; if it is functional, I'd suggest submitting a PR.

[gmsa]

Feel free to submit one @sejr

[korpa]

Hi guys,

have you seen https://troolee.github.io/gridstack.js/? I really like how element stack on each other on small screens.

[jordangorla]

@sejr Yeah ive since beefed up my code a little bit. Ive been able to dynamically adjust the resize and dragging boolean based on if they are at mobile break or not, to prevent errors. So once they are on mobile, nearly all of the grid functionality goes away and a full width and an auto height takes over. Again this works well for my use case, I could see other use cases having issues with that. Maybe there could be a prop you pass into a grid item or the layout that asks for a media query pixel break and will switch the css. idk or you can just do it yourself.

@korpa thats essentially what this css fix does, it honors the margin from the grid layout and just overwrites the grid's own css to make sure width of a grid item is 100% and the height changes to Auto to make sure any excess content stays inside the grid item and doesn't overflow.