[BUG] dnd bug in playground page

[honuuk]

@hasanharman
Hi, Hasan. I hope you are doing well.

I found a bug on the playground page. This occurs when there are two or more fields in a single row, and one of the fields is dragged to the Y-axis. Please check out video below.

DND_BUG_VIDEO.mov

I figured out that's why the X and Y axes have separate drag buttons.
However, it seems likely that some users might not see these buttons right away, as I didn’t, and might consider it a bug.

As I looked into the functionality to fix this issue, I had a few thoughts:

Improved Drag Functionality:

I think it would be better if fields could be dragged to both the X and Y axes without bugs. For example, like a 2x1 matrix with one field in Row 1 and another in Row 2, dragging the lower row's field upward could either swap the rows or merge the fields into a single row, depending on the drag distance. I’m not sure if I can implement this feature.😅
But please let me know if you like the idea. I’ll give it a try.

Limit Count of Field In One Row:

How about limiting the number of fields that can be added to a single row to 2 or 3 at most? In my opinion, a maximum of 2 fields per row should suffice since it’s rare to see 3 fields used in a single row.

Please let me know what you think about my suggestions. If you agree, I’ll try implementing the proposed changes.
Thanks!

[sujal12344]

@hasanharman @honuuk can I work on it?

[sujal12344]

when click try to drag with 2-3 field in single row and try to solving this issue then, i got another issue where i try to drag one of the field inside 1 row then its duplicate, according to shared image

duplicate changes are shown in preview tab also

@hasanharman @honuuk

[honuuk]

@sujal12344

Sure!
I wasn’t aware of the additional bugs you found, but it would be great to see them all fixed.
I’m really curious to see how the code will change. I’ll be looking forward to your PR!

[sujal12344]

All right, its geniuses issue @honuuk , but if @hasanharman want to resolve this issue, then only i will try, otherwise its waste of time and hardwork

[hasanharman]

Hi to all, I'll work on this week, thanks guys for everything 🙌 @honuuk I saw your contribution, you can finish this task if you want or I can continue where you left

[honuuk]

@hasanharman @sujal12344
Sujal has found other bugs related to this issue and wants to fix them as well, so I think it would be better for Sujal to fix this issue. I’ll follow up on the code later!

[sujal12344]

Can I work on this issue @hasanharman @honuuk ??

[honuuk]

@sujal12344
Sure! Hasan agreed, and I'm hoping that you will work on this issue.
I've reported the issue, but I'm not sure about how to fix it. I'm looking forward to witnessing your solutions.

[sujal12344]

@hasanharman can i do it?

[hasanharman]

@sujal12344 Sure please go 🚀

[sujal12344]

Hey, @hasanharman @honuuk first of all sorry for late response.

This issue stems from Framer Motion itself, meaning it cannot be resolved within Framer Motion.

As mentioned in the image above, the Motion community also advises against using it for this purpose. Instead, they recommend using DnD Kit as a more suitable alternative.

[honuuk]

@sujal12344 @hasanharman
Hmm... As you mentioned, It seems like an issue with Framer Motion. There's not much we can do about that.
I checked DnD kit, and they have a very suitable example. We could locate form inputs with an n * 2 or n * 3 grid layout.
Please leave your comments on this.