dnd-grid
dnd-grid copied to clipboard
dattn
Add possibility to move boxes from one to another container
Maybe somekind of drag and drop feature will complement this - this way you can add new boxes to the specific coördinates within the grid by just draggin it from one container to another.
Like https://github.com/cameronhimself/vue-drag-drop does with the drag and drop system. Drag is a container from which you can drag new boxes. Drop is the actual cell within the grid you can drop a new box on.
Currently trying combining these two plugins/addons to sorta create something like this. Combining https://github.com/cameronhimself/vue-drag-drop and https://github.com/dattn/dnd-grid
I've got it working, the only thing which isn't working and would be really awesome is if it was possible to show a ghost of the to be item, so you can see where it will be added and what it will look like
Okay, I even got some sort of a ghost working so I think I've got this part done now
Can you give me some code snapshots, to see how you have done this ? So i can improve my code for better integration.
I can push my code to github in a moment - first have to strip some things and add mocked data
And did you take a look? I would love to improve my custom gridoverlay for when adding an item - currently trying to recreate what you're doing :D
Looks good :) So the gif represents now your version of "dnd-grid" based on css grids ?
The gif respresents a system which uses your dnd-grid on the background but on the dragStart event of vue-drag-drop it shows a div over the grid which is used for displaying the ghost's etc and supplying a drag component for vue-drag-drop - so it's more of a combination of two vue plugins and some handy work of my self to make it work :D
Okay, so it's the same as in the repo you shared. I will try to make my code more flexible for this kind of usecase. But for the next 2 weeks i will not have much time.
What is the current state of this feature? Also @dvdbot is the repo public? Couldn't find it amongst your repos.
@johannes-z It's private atm - currently @dattn is looking into it and may be able to provide better integration
I'm also planning to look into @dattn 's dnd-grid's source code and try to port it to CSS-Grids
@johannes-z if you want access just ask - I can add you - but keep in mind it's really still a Work In Progress thing
@dvdbot Could I have access to your work in progress repo for this. This is the same use case I have been trying to get to work.
@jacobebell Yes that's possible but I'll first have to take it out of my project. Also it's HTML5 Canvas based now
@DannyGoldner first, please don't comment three times... one is enough :joy: second, I may be able to rewrite it so it will be share-able but that will take sometime and project deadline is tomorrow 😅
@DannyGoldner first, please don't comment three times... one is enough 😂 second, I may be able to rewrite it so it will be share-able but that will take sometime and project deadline is tomorrow 😅
Tomorrow? I will wait :-) Be more than happy to help
How did u add the drag from the outside to take place inside? Did u rap it with draggable vue?
@DannyGoldner Tomorrow will be the project deadline and also start of a new project - so I'll have to extract it into a module in my spare time which isn't much - I won't the separate module ready by tomorrow!
I actually stopped using this package... I rewrote it all using vanilla Drag and Drop 😅
It's possible to get it working with this package when using draggable vue I think I still got it somewhere on one of the branches :joy:
@dvdbot Can't wait! please update. I have tried to do the same with vue-grid-layout but it just don't work. I was thinking that while dragging, I create new instance of item that should follow the mouse movement untill I drop it, which is the new placement of the new item. Didn't work :-/
@dvdbot , I am also wondering to know what's your latest solutions to get the .gif you had show before, since it had been a year, did you get more advanced solutions?
