Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to only replace item chosen to prevent shifting all other items on grid? #144

Open
FuriosoJack opened this issue Jul 31, 2021 · 0 comments

Comments

@FuriosoJack
Copy link

FuriosoJack commented Jul 31, 2021

Here's an example to test: https://codesandbox.io/s/vuedraggable-with-css-grid-forked-drqdo?file=/src/App.vue

I know it's another library but I want to know if I can do the same with this one

Step 1: Drag 4 to 5. As you see, 4 and 5 switch places

Step 2: Drag 1 to 6, as you see, 1 goes where 6 was, 6 gets pushed to the side, and 2, 3, 4, and 5 all shift over.

I would like though is to keep existing items untouched, moving 1 and 6 should move 1 to 6 and 6 to 1 space on the grid. All other items should remain in their spaces.

I have tried using sort=false this had no effect, and without a group=, it disables all dragging.

Is this possible?

I'd like the items in the grid to be stationary and only moved based on desired selection. If I'm not using the right tool, is there something else that could accomplish this? Think about if the grid was icons, it does make a good UI when moving icons to a selection and then all the previous icons automatically shift over. Would be very annoying to the user.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant