You can enable generated drag-and-drop behavior for lists by marking the relevant ViewModel classes as drag sources and drop targets; this page is for developers configuring that behavior in MDriven Designer.

Enable drag and drop for a list

Add the DragSource and DropTarget tags to the appropriate ViewModel classes. Set each tag value to True, without quotation marks.

1. Open the ViewModel that supplies the objects displayed in the list.
2. Identify the ViewModel class for the objects a user will drag.
3. Add the tag DragSource with the value True.
4. Identify the ViewModel class that represents a valid drop destination.
5. Add the tag DropTarget with the value True.
6. Generate and run the application. Angular code for list drag-and-drop is generated from these tags.

For example, in a board-style ViewModel, you might mark a card as a drag source and a board list as a drop target:

ViewModel class	Tag	Value	Purpose
Card	DragSource	True	Allows the user to drag a card.
BoardList	DropTarget	True	Allows the list to receive a dropped card.

Respond to a drop

Enabling the tags makes the generated list UI participate in drag and drop. Define the model behavior that should run when one object is dragged onto another as an action.

A class action can be a drag action. Class actions run with the dragged-on object as their model context and cannot use the ViewModel vCurrent or vSelected variables. Use the action's expressions to implement the model change that represents the drop.

For example, when a user drops a card on a board list, the drag action can update the card's association so that the card belongs to that list. The precise action configuration and expressions depend on the model.

Choose generated behavior or a custom web implementation

Use DragSource and DropTarget when the generated list behavior meets the UI requirement. If you are building a custom board or other bespoke MDriven Turnkey web UI, implement the interaction in the override markup and TypeScript instead of editing generated JavaScript directly.

The Trello-like board example demonstrates a custom approach: its markup renders board lists and cards, while TypeScript handles pointer movement and executes a ViewModel action when required. This approach is appropriate when you need custom layout or interaction details beyond generated lists.

Verify the configuration

1. Run the ViewModel in the target client.
2. Confirm that an item from a class tagged DragSource=True can be dragged.
3. Confirm that an object from a class tagged DropTarget=True accepts the drop.
4. Confirm that the configured drag action makes the intended model change.
5. Test the action's enable conditions so users cannot perform invalid drops.

Related action types

Drag-and-drop behavior is one way that MDriven can trigger an action. For an overview of action scopes and execution, see Documentation:Actions. Use ViewModel actions when behavior depends on the current ViewModel context, and use class actions when it should be available wherever an object of that class is shown.

See also

• Documentation:Actions
• Documentation:Class actions
• Documentation:ViewModel actions
• Documentation:A Trello like Board In MDrivenTurnkey
• Documentation:Web client actions in tables