search

clauderic / dnd-kit

The modern, lightweight, performant, accessible and extensible drag & drop toolkit for React.
http://dndkit.com
MIT License
13.08k stars 648 forks source link

How to combine Clonable lists with freeform canvas (eg sticky notes)? #1232

Open taziksh opened 1 year ago

taziksh commented 1 year ago

Intro

I have seen examples of clonable lists, where one drags from one canvas to another. I have also seen examples of "free flowing" canvases as in a sticky note application. I am working on an application where I want to combine both of these functionalities (it's a drag-n-drop form builder), but am facing issues.

Bugs

I have tried combining the two, but end up in an infinite rendering loop:

My code: https://codesandbox.io/p/github/taziksh/dnd-cloner/main?file=/src/DraggableItem.tsx:4,40-4,41&workspaceId=7231a59f-093d-43d3-9c94-35db2b7d6497

My instinct is to useDndMonitor() and conditionally manage context for different draggable types, as in https://github.com/clauderic/dnd-kit/issues/58#issuecomment-822922842. However, I am not sure at what level of my component tree I should be using the useDndMonitor() monitor hook. Would appreciate specific or general tips to help debug my issue.

Examples

I have used the below examples to help guide my project. Might be helpful for anyone trying to debug this issue.

dnd-kit cloning example

Thread: https://github.com/clauderic/dnd-kit/issues/45#issuecomment-1325938227 Codesandbox: https://codesandbox.io/s/distracted-mendel-hibbgu

dnd-kit sticky notes example

Thread: https://stackoverflow.com/a/74697427 Codesandbox: https://codesandbox.io/s/dnd-kit-free-drag-n-drop-forked-gj9qmt

akshat157 commented 7 months ago

Hey, @taziksh. Were you able to make any progress on this? I believe that https://github.com/clauderic/dnd-kit/issues/1261 is a related issue. There are several issues and discussions in the repository that discuss dragging by copying or dragging from a sidebar but almost all of them address the issue for a sortable list or for when the droppable area is just a simple container. None of the discussions talk about freely dropping the draggable into a droppable area such that it is created at the position of drop.

Any inputs will be appreciated!