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

[Copilot]

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": true → drop 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, ... } } }

[clauspruefer]

@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]

@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

[Copilot]

Pull request overview

Adds HTML5 drag-and-drop support to core x0 UI objects (List, FormfieldList, TreeSimple) via a new global drag/drop coordinator (sysFactory.DragDropHandler), plus styling and an example app (#16) demonstrating the feature end-to-end.

Changes:

• Introduces www/sysDragDropHandler.js and initializes it during InitOk() to share drag source + payload across drop targets without dataTransfer serialization.
• Adds drag source / drop target behavior to sysObjList, sysObjFormfieldList, and sysObjTreeSimple (including a TreeRootObj parameter on sysObjTreeSimpleNode).
• Adds .sysDragDropOver styling and ships a complete example/drag_drop/ configuration + SQL + README.

Reviewed changes

Copilot reviewed 13 out of 13 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
www/sysObjTreeSimple.js	Enables tree item dragging and node drop targets; updates node constructor to carry tree root reference.
www/sysObjList.js	Makes list rows draggable and lists droppable (append-on-drop) with hover styling.
www/sysObjFormfieldList.js	Adds drop target support to populate form fields from dragged row data.
www/sysInitOnLoad.js	Initializes the global drag/drop handler (sysFactory.DragDropHandler).
www/sysDragDropHandler.js	New global coordinator storing the current drag source object and payload.
www/static/globalstyles.css	Adds .sysDragDropOver visual feedback styling for active drop targets.
python/Index.py	Loads sysDragDropHandler.js in the standard frontend script bundle.
example/drag_drop/static/skeleton.json	New example screen layout wiring tabs and object placement.
example/drag_drop/static/object.json	New example objects demonstrating List→List, List→FormfieldList, Tree move scenarios.
example/drag_drop/static/menu.json	Adds example menu entry.
example/drag_drop/sql/sys-config.sql	Registers example16 configuration in DB.
example/drag_drop/sql/insert-txt.sql	Adds English text entries used by the example UI.
example/drag_drop/README.md	Documents how to run and use the drag-and-drop example.

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.