Drag and Drop

This example demonstrates how to nest multiple FluentDragContainer components to enable drag-and-drop interactions across hierarchical structures such as rows, columns, and elements. The key to making this multi-level drag-and-drop system work is the use of the StopPropagation property. By enabling it where appropriate, each nested FluentDragContainer can handle drag events independently-preventing unintended interference from parent containers. Each level supports independent drag behavior:

• Rows can be reordered vertically.
• Columns can be moved within the same row or between different rows.
• Elements can be rearranged inside a column or moved across columns.

The yellow area indicates an empty drop zone inside a row. It accepts columns when a row does not contain any yet. Similarly, empty columns behave as drop zones for elements. This structure allows fully flexible layout editing with deep nesting and drag-and-drop handling at every level.