search

dattn / dnd-grid

A vuejs grid with draggable and resizable boxes
307 stars 48 forks source link

Add possibility to move boxes from one to another container #5

Open dattn opened 7 years ago

cycold commented 7 years ago

If can add an clone to another box. That must be great.

dattn commented 7 years ago

Can you explain more in detail what you want to do ?

ThaDaVos commented 6 years ago

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

ThaDaVos commented 6 years ago

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

ThaDaVos commented 6 years ago

Okay, I even got some sort of a ghost working so I think I've got this part done now

dattn commented 6 years ago

Can you give me some code snapshots, to see how you have done this ? So i can improve my code for better integration.

ThaDaVos commented 6 years ago

I can push my code to github in a moment - first have to strip some things and add mocked data

ThaDaVos commented 6 years ago

@dattn I added you as collaborater to my repository

dattn commented 6 years ago

Thx, i will have a look later

ThaDaVos commented 6 years ago

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

ThaDaVos commented 6 years ago

Done :D But in my opinion better :P

Why aren't you using CSS Grids?

ThaDaVos commented 6 years ago

https://css-tricks.com/snippets/css/complete-guide-grid/

ThaDaVos commented 6 years ago

https://giphy.com/gifs/jysFXHKC144vNqe3Vs

ThaDaVos commented 6 years ago

drag and drop showcase

dattn commented 6 years ago

Looks good :) So the gif represents now your version of "dnd-grid" based on css grids ?

ThaDaVos commented 6 years ago

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

dattn commented 6 years ago

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.

ThaDaVos commented 6 years ago

Sort of, I've redone the overlay itself with pure css-grid

johannes-z commented 6 years ago

What is the current state of this feature? Also @dvdbot is the repo public? Couldn't find it amongst your repos.

ThaDaVos commented 6 years ago

@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

ThaDaVos commented 6 years ago

@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

blockdev88 commented 6 years ago

@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.

ThaDaVos commented 6 years ago

@jacobebell Yes that's possible but I'll first have to take it out of my project. Also it's HTML5 Canvas based now

ThaDaVos commented 5 years ago

@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 commented 5 years ago

@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?

ThaDaVos commented 5 years ago

@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 😅

ThaDaVos commented 5 years ago

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:

DannyGoldner commented 5 years ago

@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 :-/

DannyGoldner commented 5 years ago

@dvdbot Any News?

wemod123 commented 5 years ago

@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?