New drag-and-drop engine

[chrisvxd]

Introduce a new drag-and-drop engine to resolve numerous issues:

1. Support dragging between DropZone areas #123
2. Support dragging on mobile (touch) #389
3. Explore elimination of edit wrappers #455
4. Feature request: DropZones support horizontal direction #520

Proposals

Proposal 1 - dnd-kit (preferred)

The new experimental dnd-kit release, whilst in early alpha, may resolve all issues 1 - 4. This is the solution currently being explored.

Being implemented here: #598

Proposal 2 - custom drag-and-drop library

Creating a custom drag-and-drop library may be more suitable for Puck's needs, and a POC has been created, but significant additional effort is needed to support 3 and 4.

Cross-cutting concerns

• iframe support should be retained
• retain existing animation curves

[Anishali2]

@chrisvxd I have expertise in dnd-kit can i start working?

[chrisvxd]

@Anishali2 I appreciate that, but we're pretty far down the road now in #598 and just ironing out the last few bits with the dnd-kit team!

If you have any expertise in the experimental brand of dnd-kit, I may have some questions for you in the Discord!

[Anishali2]

@chrisvxd Sure

[Sarfraz-droid]

You can also consider using react-dnd. I had some issues while using dndkit between iframes. Since it does not uses HTML Dnd Api

[chrisvxd]

@Sarfraz-droid we're sticking with dnd-kit now, but we're using the experimental build and actively contributing to it.

We require a lot of very complex behaviour that most dnd libraries just don't solve for (iframes is obviously one, but there's a ton more like nested dragging, animations, inline CSS, transforms, placeholders, etc).

[skowrons]

Just a thought: Have you considered the new drag-and-drop library from Atlassian? It's entirely built in JavaScript and is framework-independent.

https://github.com/atlassian/pragmatic-drag-and-drop