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

example/drag_drop/README.md

@@ -0,0 +1,63 @@
+# Example #16: Drag and Drop
+
+This example demonstrates how to implement drag-and-drop functionality in the **x0-framework**,
+enabling objects to be dragged between UI components for seamless data transfer.
+
+## URL
+
+Open URL: `http://x0-app.x0.localnet/python/Index.py?appid=example16`
+
+## Scenarios Demonstrated
+
+### 1. List → List (Append by Drag)
+
+- **Source**: `sysObjList.js` (`SourceList`) configured with `"DragSource": true`.
+- **Target**: `sysObjList.js` (`DestinationList`) configured with `"DropTarget": true`.
+- Drag any row from the **Source List** tab and drop it onto the **Destination List** in the
+  **Drop Targets** tab. The row data is appended to the destination list.
+
+### 2. List → FormfieldList (Set Form Data by Drag)
+
+- **Source**: same `SourceList` above.
+- **Target**: `sysObjFormfieldList.js` (`DestinationForm`) configured with `"DropTarget": true`.
+- Drag any row from the **Source List** tab and drop it onto the **Form Drop Target** in the
+  **Drop Targets** tab. The row data populates the form fields.
+
+### 3. Tree Item → Tree Node (Move by Drag)
+
+- **Tree**: `sysObjTreeSimple.js` (`DragDropTree`) configured with both `"DragSource": true`
+  and `"DropTarget": true`.
+- In the **Tree** tab, drag any item from one node and drop it onto another node's header.
+  The item is moved to the target node's children list.
+
+## Configuration
+
+All drag-and-drop behaviour is declared declaratively in `object.json`:
+
+| Object type      | Attribute      | Effect                                    |
+|------------------|----------------|-------------------------------------------|
+| `List`           | `DragSource: true` | Rows can be dragged as data sources   |
+| `List`           | `DropTarget: true` | Rows from other lists can be dropped  |
+| `FormfieldList`  | `DropTarget: true` | Dragged row data sets the form fields |
+| `TreeSimple`     | `DragSource: true` | Tree items can be dragged             |
+| `TreeSimple`     | `DropTarget: true` | Tree nodes accept dropped items       |
+
+## Visual Feedback
+
+Drop targets highlight with a dashed blue outline (`.sysDragDropOver`) while a draggable
+object is hovered over them.
+
+## Main Components
+
+- [`sysObjList.js`](../../../www/sysObjList.js) — drag source rows and drop target list
+- [`sysObjFormfieldList.js`](../../../www/sysObjFormfieldList.js) — drop target form
+- [`sysObjTreeSimple.js`](../../../www/sysObjTreeSimple.js) — drag source items and drop target nodes
+- [`sysDragDropHandler.js`](../../../www/sysDragDropHandler.js) — central coordinator
+
+## Object Metadata
+
+All UI and logic are defined in `./static/object.json`.
+
+---
+
+**Note:** *x0-app* and *x0-db* docker containers must be up and running for viewing.

example/drag_drop/sql/insert-txt.sql

@@ -0,0 +1,31 @@
+INSERT INTO webui.text (id, "group", value_en) VALUES ('TXT.DRAGDROP.LINK1', 'menu', 'Drag and Drop');
+
+INSERT INTO webui.text (id, "group", value_en) VALUES ('TXT.DRAGDROP.TAB1', 'tabcontainer', 'Source List');
+INSERT INTO webui.text (id, "group", value_en) VALUES ('TXT.DRAGDROP.TAB2', 'tabcontainer', 'Drop Targets');
+INSERT INTO webui.text (id, "group", value_en) VALUES ('TXT.DRAGDROP.TAB3', 'tabcontainer', 'Tree');
+
+INSERT INTO webui.text (id, "group", value_en) VALUES ('TXT.DRAGDROP.HEADER.COL1', 'table-header', 'Col1');
+INSERT INTO webui.text (id, "group", value_en) VALUES ('TXT.DRAGDROP.HEADER.COL2', 'table-header', 'Col2');
+INSERT INTO webui.text (id, "group", value_en) VALUES ('TXT.DRAGDROP.HEADER.COL3', 'table-header', 'Col3');
+INSERT INTO webui.text (id, "group", value_en) VALUES ('TXT.DRAGDROP.HEADER.COL4', 'table-header', 'Col4');
+
+INSERT INTO webui.text (id, "group", value_en) VALUES ('TXT.DRAGDROP.FORM.HEADER', 'form-section', 'Form Drop Target');
+INSERT INTO webui.text (id, "group", value_en) VALUES ('TXT.DRAGDROP.FORM.SUBHEADER', 'form-section', 'Drag a row from the Source List onto this form');
+
+INSERT INTO webui.text (id, "group", value_en) VALUES ('TXT.DRAGDROP.FORM.LABEL.COL1', 'form-label', 'Column 1');
+INSERT INTO webui.text (id, "group", value_en) VALUES ('TXT.DRAGDROP.FORM.LABEL.COL2', 'form-label', 'Column 2');
+INSERT INTO webui.text (id, "group", value_en) VALUES ('TXT.DRAGDROP.FORM.LABEL.COL3', 'form-label', 'Column 3');
+INSERT INTO webui.text (id, "group", value_en) VALUES ('TXT.DRAGDROP.FORM.LABEL.COL4', 'form-label', 'Column 4');
+
+INSERT INTO webui.text (id, "group", value_en) VALUES ('TXT.DRAGDROP.PULLDOWN.OPT1', 'pulldown-option', 'Option 10');
+INSERT INTO webui.text (id, "group", value_en) VALUES ('TXT.DRAGDROP.PULLDOWN.OPT2', 'pulldown-option', 'Option 20');
+INSERT INTO webui.text (id, "group", value_en) VALUES ('TXT.DRAGDROP.PULLDOWN.OPT3', 'pulldown-option', 'Option 30');
+
+INSERT INTO webui.text (id, "group", value_en) VALUES ('TXT.DRAGDROP.TREE.NODE1', 'tree-node', 'Group A');
+INSERT INTO webui.text (id, "group", value_en) VALUES ('TXT.DRAGDROP.TREE.NODE2', 'tree-node', 'Group B');
+
+INSERT INTO webui.text (id, "group", value_en) VALUES ('TXT.DRAGDROP.TREE.ITEM1', 'tree-item', 'Document 1');
+INSERT INTO webui.text (id, "group", value_en) VALUES ('TXT.DRAGDROP.TREE.ITEM2', 'tree-item', 'Document 2');
+INSERT INTO webui.text (id, "group", value_en) VALUES ('TXT.DRAGDROP.TREE.ITEM3', 'tree-item', 'Document 3');
+INSERT INTO webui.text (id, "group", value_en) VALUES ('TXT.DRAGDROP.TREE.ITEM4', 'tree-item', 'Document 4');
+INSERT INTO webui.text (id, "group", value_en) VALUES ('TXT.DRAGDROP.TREE.ITEM5', 'tree-item', 'Document 5');

example/drag_drop/sql/sys-config.sql

@@ -0,0 +1,9 @@
+INSERT INTO system.config (app_id, config_group, "value") VALUES ('example16', 'index_title', 'x0 Example Drag and Drop');
+INSERT INTO system.config (app_id, config_group, "value") VALUES ('example16', 'debug_level', '10');
+INSERT INTO system.config (app_id, config_group, "value") VALUES ('example16', 'display_language', 'en');
+INSERT INTO system.config (app_id, config_group, "value") VALUES ('example16', 'default_screen', 'Screen1');
+INSERT INTO system.config (app_id, config_group, "value") VALUES ('example16', 'parent_window_url', 'null');
+INSERT INTO system.config (app_id, config_group, "value") VALUES ('example16', 'subdir', '/examples/drag_drop');
+INSERT INTO system.config (app_id, config_group, "value") VALUES ('example16', 'config_file_menu', 'menu.json');
+INSERT INTO system.config (app_id, config_group, "value") VALUES ('example16', 'config_file_object', 'object.json');
+INSERT INTO system.config (app_id, config_group, "value") VALUES ('example16', 'config_file_skeleton', 'skeleton.json');

example/drag_drop/static/menu.json

@@ -0,0 +1,8 @@
+[
+	{
+		"Link1":
+		{
+			"RefID": "sysMenu"
+		}
+	}
+]