Implement new drag-and-drop engine #598
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
This will result in duplicate history entries if the item has a resolveData method. This is difficult to prevent without a deferredDispatch method, similar to that being explored in #598.
This will result in duplicate history entries if the item has a resolveData method. This is difficult to prevent without a deferredDispatch method, similar to that being explored in #598.
This will result in duplicate history entries if the item has a resolveData method. This is difficult to prevent without a deferredDispatch method, similar to that being explored in #598.
This will result in duplicate history entries if the item has a resolveData method. This is difficult to prevent without a deferredDispatch method, similar to that being explored in #598.
This will result in duplicate history entries if the item has a resolveData method. This is difficult to prevent without a deferredDispatch method, similar to that being explored in #598.
|
@chrisvxd This sounds very exciting. Dnd kit will really be a good upgrade. May I know, if there are any estimates of when this will be ready to use. Both stable and beta version of it. |
|
Thanks @princebansal - we don't have a timeline yet. It's slow progress as it's a non-trivial implementation. I would like to get it out by end of October in v0.17, but that's not based on anything! |
packages/core/components/DraggableComponent/collision/dynamic/index.ts
Outdated
Show resolved
Hide resolved
|
|
||
| ## Using DropZones | ||
| 1. The [`<DropZone>` component](/docs/api-reference/components/drop-zone), enabling you to nest components | ||
| 2. The [`inline` parameter](/docs/api-reference/configuration/component-config#inline), enable multi-directional drag-and-drop |
There was a problem hiding this comment.
| 2. The [`inline` parameter](/docs/api-reference/configuration/component-config#inline), enable multi-directional drag-and-drop | |
| 2. The [`inline` parameter](/docs/api-reference/configuration/component-config#inline), enabling multi-directional drag-and-drop |
| <ConfigPreview | ||
| label="Example" | ||
| componentConfig={{ | ||
| fields: { | ||
| title: { | ||
| type: "text", | ||
| }, | ||
| }, | ||
| defaultProps: { | ||
| title: "Hello, world", | ||
| }, | ||
| inline: true, | ||
| render: ({ title, puck }) => { | ||
| return ( | ||
| <p style={{ margin: 0 }} ref={puck.dragRef}> | ||
| {title} | ||
| </p> | ||
| ); | ||
| }, | ||
| }} | ||
| /> |
There was a problem hiding this comment.
This example needs updating or removing
| iframe.contentWindow?.addEventListener("mousemove", function (event) { | ||
| const rect = iframe.getBoundingClientRect(); | ||
|
|
||
| // NB this is a different event |
There was a problem hiding this comment.
This is weird - check if possible to use same event, or use other solution
|
Thanks so much @chrisvxd - this is an awesome update. Looking forward to mobile touch implementation. While double clicking on components. 
|
|
Hi @chrisvxd, thanks for this awesome update. Is there any guide on how to migrate an existing project? I tried to install the canary version, but the drag and drop functionality was broken. |
Implement a new drag-and-drop engine using the experimental dnd-kit release. This is a backwards compatible upgrade, focused on two new pieces of functionality:
This implementation includes additional periphery features:
Closes #556, closes #481, closes #123, closes #455, closes #520
Testing
Quick start
0.17.0-canary.c3557abTesting guide
"@measured/puck": "0.17.0-canary.XXXXXX"What to test
Known issues
Invalid instance typeerror onDragDropRegistry.registerNotFoundError: Failed to execute 'setPointerCapture' on 'Element': No active pointer with the given id is found.(requires upstream fix)Implementation details
NestedDroppablePluginfor detecting the appropriate droppable when using nested layouts.Implementation tasks
elementFromPoint.dragpermission behaviourBonus
Follow-ons