Skip to content

Add drag-and-drop functionality (List, FormfieldList, TreeSimple) - #197

Draft
clauspruefer with Copilot wants to merge 2 commits into
mainfrom
copilot/add-drag-and-drop-functionality
Draft

Add drag-and-drop functionality (List, FormfieldList, TreeSimple)#197
clauspruefer with Copilot wants to merge 2 commits into
mainfrom
copilot/add-drag-and-drop-functionality

Conversation

Copilot AI commented Jul 30, 2026

Copy link
Copy Markdown
Contributor

Objects lacked any drag-and-drop support — rows couldn't be moved between lists, tree items couldn't be reparented, and form fields couldn't be populated by dragging.

New: sysDragDropHandler

Central coordinator attached to sysFactory.DragDropHandler. Stores the dragged JS object reference and data payload so drop targets can retrieve them without dataTransfer serialisation.

List (sysObjList)

  • "DragSource": true on a list → rows get draggable="true" + dragstart stores row data.
  • "DropTarget": true on a list → drop calls existing appendData(). Self-drop is skipped.

FormfieldList (sysObjFormfieldList)

  • "DropTarget": truedrop calls existing setData(), populating fields matching the dragged row's column keys.

TreeSimple (sysObjTreeSimple)

  • "DragSource": true → item containers become draggable; dragstart stores item config.
  • "DropTarget": true → node header divs accept drops; drop calls remove() + addObject() + renderObject() to move the item to the new node. Same-parent drop is skipped.
  • sysObjTreeSimpleNode constructor gains a TreeRootObj param (call sites updated).

CSS

.sysDragDropOver — dashed outline + light tint applied to active drop targets via relatedTarget checks to avoid child-crossing flicker.

Example

example/drag_drop/ (example #16) demonstrates all three scenarios across three tabs using only JSON config:

{ "SourceList":      { "Type": "List",          "Attributes": { "DragSource": true, ... } },
  "DestinationList": { "Type": "List",          "Attributes": { "DropTarget": true, ... } },
  "DestinationForm": { "Type": "FormfieldList", "Attributes": { "DropTarget": true, ... } },
  "DragDropTree":    { "Type": "TreeSimple",    "Attributes": { "DragSource": true, "DropTarget": true, ... } } }

Copilot AI changed the title Add drag-and-drop functionality to x0 framework Add drag-and-drop functionality (List, FormfieldList, TreeSimple) Jul 30, 2026
Copilot AI requested a review from clauspruefer July 30, 2026 10:56

@clauspruefer clauspruefer left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@copilot seems nice in the first place, but please change the following behaviour: getData, setData and appendData are the wrong functions, to be object transparent for all system objects please use the meta function pointers RuntimeGetDataFunc, RuntimeSetDataFunc and RuntimeAppendDataFunc.

Copilot AI commented Jul 30, 2026

Copy link
Copy Markdown
Contributor Author

@copilot seems nice in the first place, but please change the following behaviour: getData, setData and appendData are the wrong functions, to be object transparent for all system objects please...

Done — the drop handlers now use the meta function pointers:

  • sysList.onDrop: this.appendData(DragData)this.RuntimeAppendDataFunc(DragData)
  • sysFormfieldList.onDrop: this.setData(DragData)this.RuntimeSetDataFunc(DragData)

Commit: Use RuntimeSetDataFunc/RuntimeAppendDataFunc in drag-and-drop drop handlers

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants