Add Drag and Drop Functionality#28
Conversation
Still need to patch duplication that occurs when moving an item from a child to another location outside of its current container.
There were two write operations happening at the same time which made it so that the inner child node would duplicate. This had to do some consolidation to get them into a single operation.
Not sure why this isn't picked up by the check. Ah, the check script must not cover this or do type checking. But there is a typecheck script.
|
Some research has me thinking maybe I should have went the direction of utilizing a library like: |
|
Hi @ctsstc, just wanted to ask if you're still working on this PR. The feature looks really useful. |
|
I think this was at a point of working fine. I just never got back to this.
But then I ran across this which was less heavy, more flexible, and integrated with more: Part of me wonders about coming at this again and utilizing DNDKit Need to at least get the conflicts resolved. |
Replace home-rolled HTML5 DnD with @atlaskit/pragmatic-drag-and-drop:
- Rewrite DragContext to simplified { draggingId, overId, overEdge } state
- SchemaPropertyEditor: useEffect registers draggable() + dropTargetForElements()
via refs (propsRef pattern prevents re-registration during active drags);
canDrop guards prevent self-drop and dropping onto descendants
- SchemaFieldList: single global monitorForElements drives all visual state
(setDragging, setOver) via onDragStart/onDrag/onDrop — avoids false
onDragLeave events from child elements; resolveTarget() skips ancestor
containers so nested items stay nested during reorder
- ObjectEditor: remove all manual drag handlers and drag props
- tsconfig.test.json: add paths aliases so tsx (Node ESM) resolves
Pragmatic DnD subpath exports to CJS dist files
Net: -233 lines. Cross-container drag and nested reorder both work correctly.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
|
I tried having Claude Code switch over to DNDKit, but it just didn't want to work out unfortunately; I had big hopes for it, but the nested DND just didn't want to work out well :( So I had it try porting over to Atlassian's Pragmatic DND which ended up working after a bit of guidance. I've updated this PR to utilize the pragmatic variation -- it does reduce the lines from the html5 implementation, but honestly the HTML5 implementation was working just fine (and didn't require any dependencies - just some additional management was all). Here are the 3 tries |
|
Looks like one commit where I merged main back in brought some local shenanigans (pnpm, etc) that I can remove. |
Both were incorrectly changed during the merge in 6307976.
3 participants
Overview
This adds drop and drop functionality to help order items as well as move them into or out of nested items like objects or lists.
Preview
drag.and.drop.json.schema.editor.mov
Hurdles
Notes
Resolutions