Configure drag and drop

A few settings for enabling this needs to be set up.

• The Container where items should be dropped should have the setting Enable Drop Area and an action should be set on the On Drop Event Handler.

• The Container that can be dragged, should have the settings Enable Draggable and Enable Drag Handler. Optionally, actions can be set on the On Drag Start and On Drag End Event Handlers to trigger actions when users start or stop dragging the Container.

Example usage

An App contains two lists (Repeating Containers). One list containing Open Tasks, and another list containing Completed Tasks. Each list iterates the same Data Source, but with different filters.

You would like to enable drag & drop between them and change the Status of the Task when dragged to the opposite list.

1. Iterating Containers Open Tasks and Completed Tasks should have the setting Enable Drop Area.

2. Iterating Containers Open Tasks and Completed Tasks: The first sublevel Container, holding the "single entry", should have settings Enable Draggable and Enable Drag Handler.

3. Iterating Container Open Tasks: a dedicated Action should be created and connected to the Event Handler On Drop. The Action should update the Object in Context (the Activity Dragged) setting the Status to Open.

4. Iterating Container Completed Tasks: a dedicated Action should be created and connected to the Event Handler On Drop. The Action should update the Object in Context (the Activity Dragged) setting the Status to Completed.

Note in step 2, that when a Container holding a single Task is dragged, this Task is the Object in Context of the Data Source it is bound to, and you may use the Object in Context when you want to perform operations on the dragged object in the On Drop action.

A full example setup on Drag & Drop is available in our Showroom. You may view a demo, as well as accessing the setup in Appfarm Create. If you do not have access, you may register on Showroom Signup.