Drag and Drop between controls on the form

Working

Drag and drop operation currently happens in the implementer interface in the following way.

a. Initial drag and drop

This drag and drop happens when the control is dragged from the controls list on to the canvas. Controls list is the top left panel where one can see all the controls that are available.   

1. When a control is selected and Drag starts(dragStart event) the drag data (`event.dataTransfer`) is set. The data is nothing but the default metadata from the descriptor for that control.

The data is set with the type `data`.

event.dataTransfer.setData('data', metadata))

2. When the control enters a valid drop target (Cells) the user can drop it there to display the conrtol there.

b. Subsequent drag and drop

This DnD happens when the control is moved from one valid drop target to another after being rendered on the form. The drag data is set here too but this time it will be the updated metadata.

The domain controls are agnostic of the drag and drop api

Architecture to Support the Drag and drop

The following components are involved in the drag and drop functionality.

• Grid
• Row
• Cell
• ControlWrapper
• Draggable class
• DropTarget Class
• control pool

Draggable class:

This is a super class that is meant to be derived by controls the wish to become draggable. It provides few methods that help in drag operation and setting the data for the drag.

onDragStart method should be attached to the `onDragStart` event of the control. This method inturn calls the `processDragStart` method which should be overridden if extra processing needs to be done during the actual drag start event.

onDragEnd method should be attached to the `onDragEnd` event of the control. This method notifies the parent component, from where the drag started, once the component is dropped elsewhere so that the parent can process the move.

DropTarget class:

Grid is composed of Rows and Rows are composed of Cells. This Grid forms the table structure to display the components.

Grid manages the Rows and currently add rows if all the rows are filled with controls. this removes the user from explicitly adding rows for more real estate.

Rows manages the cells and currently the no of cells are fixed in a row(to limit the horizontal space).