Configure drag and drop

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

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

  • The Container that should be possible to drag, should have setting Enable Draggable and Enable Drag Handler. Optionally you can set and action on the On Drag Start Event Handler.

An App contains two lists (Repeating Containers). One list containing Open Tasks, and another list containing Completed Tasks. Each of these lists iterate 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 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, 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.

Last updated