search

tisdadd / configured-dnd-context

An extra context for use with dnd-kit to help make it easy to add copying between sortable containers, generating ids, and some other extra functionality
MIT License
5 stars 0 forks source link

Using basic copy example, dragging away deletes items... #3

Closed paulm17 closed 3 months ago

paulm17 commented 3 months ago

Hello!

Thank you for this amazing work!

Due to it's size and complexity, I'm just trying to get a basic starting point and I'm having a very strange problem.

It's probably due to something I have missed, so if you spot it. Please let me know 😄.

I have a (react) sandbox here: https://codesandbox.io/p/sandbox/upbeat-mcclintock-qw4yfn

Works fine no problems at all.

However, I have that same code in a NextJS repo: https://github.com/paulm17/configured-dnd-example

npm i
npm run dev

If you drag an Item on the left hand side and then drag it over to the right and then back again without releasing. It removes an item from the 2nd stack.

Video here: https://streamable.com/q98a10

Edit: I realised it's a react sandbox. Not a NextJS one. This NextJS one exhibits the same issue: https://codesandbox.io/p/devbox/nextjs-14-learn-course-forked-2nhdxd

Looks like this is a NextJS issue?

Thanks!

tisdadd commented 3 months ago

Thanks, I opened a pull request to your repo. It seems that something is happening slightly differently in Next. As not a lot of people are using this, I did the easier fix for finding the right index rather than possibly re-hooking into some other functions as it has been ~5 months since last updating it.

After I got this project all implemented (and yes, with the underlying library it was a more complex thing than I wish it were), I realized my initial design I had created with drag-and-drop wasn't quite as good as another iteration I came up with later.

Anyway, if this fix doesn't do it for you, please feel free to re-open.

paulm17 commented 3 months ago

Thank you for taking the time to implement that fix. Appreciate it! I can confirm that it works now! 😄

As an aside, now that you have better code so to speak. Will you circle back and implement updates or will you refactor into a new library?

tisdadd commented 3 months ago

You are most welcome, glad to hear.

Really, it is that for my use case the Drag and Drop UI I had envisioned became too complex from a usability standpoint. I found myself starting to add methods to make it simpler for myself to enjoy, and realized that for my initial design just wouldn't work across a variety of screens quite as nicely.

I may still utilize this for portions if it seems good to do so (I have a task to look into where would be good to keep drag and drop) but will need to see.

I feel like I am starting to approach a good initial MVP, but since how it interacts is the differentiator I am syncing a lot of time into it.

After release, if I feel I have a good enough pattern, I am working on a syncing state for across multiple devices or tabs so I might extract that into a library as well. It seems like a useful tool for others, and an ok way to monetize a product that might be free otherwise. Just tweaking some potential concerns around in my head - and I like to make things as simple to use as I can if I release them, as well as have a good pattern available.