Drag Drop Sortable List
Overview
Customizable list that can be sorted with drag drop
Documentation
Drag Drop List
A Mendix pluggable widget that renders a datasource as a sortable list. Users can reorder items by dragging and dropping. When a drop occurs the widget writes the original sort order values of the dragged and target items into context attributes so a microflow or nanoflow can persist the new order.
Features
- Render any datasource as a drag-and-drop sortable list
- Fully configurable list item content via the Mendix Studio widget slot
- Reads a Sort order attribute from each item to identify positions
- Writes the sort order of the dragged item and the drop-target item into separate context attributes on drop
- Fires a configurable On drop action (microflow / nanoflow) after the attributes are set
- Smooth drag animation powered by SortableJS
Configuration
Data Source tab
Property | Required | Description |
Data source | Yes | The list of objects to display |
List item content | No | Widget(s) to render inside each list row |
Sort order attribute | Yes | Integer or Long attribute on each item that holds its current sort position. Used to populate the On Drop attributes. |
On Drop tab
Property | Required | Description |
Dragged item sort order | Yes | Context attribute that receives the sort order value of the item being dragged (its position before the drop) |
Dropped item sort order | Yes | Context attribute that receives the sort order value of the item at the drop destination |
On drop action | Yes | Microflow or nanoflow executed after both sort order attributes have been set |
Usage
- Add the Drag Drop List widget to a page.
- Set Data source to the list you want to make sortable (e.g. an association or XPath datasource sorted by your sort order attribute).
- Drop widgets into the List item content slot to define what each row looks like.
- Set Sort order attribute to the Integer/Long attribute that stores the order (e.g. SortOrder).
- In the On Drop tab:
- Map Dragged item sort order and Dropped item sort order to Integer/Long attributes on a helper or context object.
- Set On drop action to a microflow/nanoflow that swaps or recalculates sort order values and commits the affected objects.
- The widget renders the list without bullet points and handles the visual reorder immediately. Your action is responsible for persisting the new order to the database.
Suggested microflow logic
// Receive: DraggedSortOrder, DroppedSortOrder
// 1. Retrieve the DraggedObject by DraggedSortOrder
// 2. Retrieve items used as datasource with xpath [(SortOrder >= DraggedSortOrder and SortOrder <= DroppedSortOrder) or (SortOrder <= DraggedSortOrder and SortOrder >= DroppedSortOrder)]
// 3. create variable Shift = If DroppedSortOrder > DraggedSortOrder then -1 else 1
// 4. Loop thru the list of 2 and change all the sortorder = sortorder + $Shift
// 5. Change the object from 1 and add it to the list
// 6. Commit the loop with refresh
Issues, suggestions and feature requests
Please open an issue on GitHub.
The widget is built with React 18, TypeScript, and SortableJS.
Releases
Inital version