Skip to main content

SILK UI Framework

 

OutSystems

Drag and Drop Mobile Component

The Drag and Drop Mobile component allows you to drag an element and drop it in a different location, in a fluid way. Use this component when you want to manipulate UI objects and their behavior, by dragging and dropping them in different areas of your application.

How to Use the Drag and Drop Mobile Component

This component uses 2 blocks: DraggableItem and DropArea. Each block receives a unique identifier, which will later be returned on the OnDrop Event. In the DraggableItem block select the elements which will be draggable, and use the DropArea block to define the areas where those elements can be dropped.

  1. In your Application Module, click the Manage Dependencies button.
  2. Select the component and all its actions, blocks and entities.

dependencies drag drop.png

Drag an Object From a List and Drop it in a Different List

1. Add references to the component.

2. Create the list of elements that you want to drag. Drag the DraggableItem block into the list and place the desired content inside the “Content” placeholder. This will create a new DraggableItem for each Item in the list.

draggable item.png
 

3. Associate a unique identifier to each DraggableItem by filling the block’s “Id” input parameter.
    This unique identifier can be your database Unique Identifier or any other value that you feel that easily identifies each Item.
    This value will be returned on the OnDrop Event.

draggable detail new.png
 

4. Use the DropArea block to create an area where users can drop elements. Normally inside the DropArea block, you should use a list, to easily show all the elements that were dropped on that list. You can create as much drop areas as you want.

dropped item.png
 

5. Similarly to the DraggableItem, associate a unique identifier to each DropArea by filling the block’s “Id”  input parameter.

6. To allow the developer to build the business logic behind the Drag and drop interaction, each block provides an event: OnDrop for the DraggableItem block and OnDropReceive for the DropArea block. 
    Both events are triggered in the drop action at same time. You can choose which one is better to use. 
    For now, we are going to use the DraggableItem one: OnDrop. Create a new handler for this event:

new_on drop.png

Inside the handler action, you must add a new record in the List of dropped items using the Create or Append actions.

create or append actions.jpeg

Drag an Object and Drop it Only in Allowed Area(s)

1. Add references to the component. Click here to see how to do it.

2. Create the list of elements that you want to drag. Drag the DraggableItem block into the list and place the desired content inside the “Content” placeholder. This will create a new DraggableItem for each Item in the list.

draggable item content.png
 

3. Associate a unique identifier to each DraggableItem by filling the block’s “Id” input parameter.
    a. This unique identifier can be your database Unique Identifier, or any other value that you feel that easily identifies each Item.
    b. This value will be returned on the OnDrop Event.

draggable item detail.png
 

c. To allow the Draggable item to be dropped in a specific DropArea, associate the DraggableItem with DropArea using the DropGroup input parameter. Name the DropGroup with a text or number. Eg.: If the Draggable Item has “GroupA” in the DropGroup input parameter it can only be dropped in the DropArea with the same “GroupA” value in the DropGroup input parameter.

drop groups.png
 

4. Use the DropArea block to create an area where users can drop elements. Normally inside the DropArea block, you should use a list, to easily show all the elements that were dropped on that list. You can create as much drop areas as you want.

dropped item.png
 

a. To allow the Draggable item to be dropped in a specific DropArea, associate the DraggableItem with DropArea using the DropGroup input parameter. Name the DropGroup with a text or number. Eg.: If the Draggable Item has “Group1” in the DropGroup input parameter it can only be dropped in the DropArea with the same “Group1” value in the DropGroup input parameter.

5. Like we did with the DraggableItem, associate a unique identifier to each DropArea by filling the block’s “Id”  input parameter.
    You can allow the item to be draggable again after the drop action. For that, use the DraggableItem block inside the list of dropped element.

dropped item detail.png
 

6. To allow the developer build the business logic behind the Drag and drop interaction, each block provides an event: OnDrop for the DraggableItem block and OnDropReceive for the DropArea block. 
    a. Both events are triggered in the drop action at same time. You can choose which one is better to use. 
    b. For now, we are going to use the DraggableItem one: OnDrop. Create a new handler for this event:

draggable item on drop.png

c. Inside the handler action, you must add a new record in the List of dropped items using the Create or Append actions.

Drag an Object After Long Pressing

Follow the steps below to drag a long-pressed object for a pre-configured time.

1. After adding references to the component, create the list of elements that you want to drag. Drag the DraggableItem block and drop it on the list. Place the desired content inside the Content placeholder. This will create a  new DraggableItem for each item on the list.

draggable item content.png

2. Associate a unique identifier to each DraggableItem by filling the block's "Id" input parameter.
    - This unique identifier can be your database Unique Identifier or any other value that can easily identify each item.
    - This value will be returned on the OnDrop event.

draggable item detail.png

3. To activate the long press feature, in the DraggableItem block, you have to configure the time that is needed before you start moving the element. This time's value is milliseconds, where 0 means that the user can move the draggable item immediately after pressing it.

draggable long press.png

4. Use the DropArea block to create an area where users can drop elements. Normally, inside the DropArea block, you should use a list to easily show all the elements that were dropped there. You can create as many drop areas as you want.

dropped item.png

5. Like you did in the DraggableItem, associate a unique identifier to each DropArea by filling in the block's "Id" input parameter.

6. Each block provides an event that allows building the business logic behind the Drag and Drop interaction: OnDrop for the DraggableItem block, and OnDropReceive for the DropArea block.
    - Both events are triggered by the drop action at the same time. You can choose which one is better to use.
    - We will now use the DraggableItem event OnDrop.
    Create a new handler for this event:

on drop long press.png

7. Inside the handler action, you must add a new record to the list of dropped items using the Create or Append actions.

Sort Elements

Follow the steps below to sort dragged elements.

1. After adding references to the component, create the list of elements that you want to drag. Drag the DraggableItem block and drop it on the list. Place the desired content inside the Content placeholder. This will create a  new DraggableItem for each item on the list.

draggable item content.png

2. Associate a unique identifier to each DraggableItem by filling in the block's "Id" input parameter.
    - This unique identifier can be your database Unique Identifier or another value that easily identifies each item.
    - This value will be returned on the OnDrop Event.

on drop sort.png

3. Use the DropArea block to create an area where users can drop elements. Normally, inside the DropArea block, you should use a list to easily show all the elements that were dropped there. You can create as many drop areas as you want.

dropped item.png

4. Turn on the Sort feature be setting the Sort parameter to True in the DropArea block. Each DropArea has a different sort configuration. You cannot sort elements in the same list if the CloneOnDrag parameter is set to True.

5. Use the SortOrientation to configure the affordance and the calculation of the list. If the list is organized in lines (vertical), the affordance will be positioned on top of the element or on bot of the element. If the list is organized in columns (horizontal), the affordance will be positioned before or after the element. The calculation of the sort is different for each configuration of the list.

Vertical Sort:                            Horizontal Sort:

sort vertical.png          sort horizontal.png

6. Like we did with the DraggableItem, associate a unique identifier to each DropArea by filling in the block’s “Id”  input parameter.

7. Each block provides an event that allows building the business logic behind the Drag and Drop interaction: OnDrop for the DraggableItem block, and OnDropReceive for the DropArea block.
    - Both events are triggered by the drop action at the same time. You can choose which one is better to use.
    - We will now use the DraggableItem event OnDrop.
    Create a new handler for this event:

on drop last.png
    - To identify the original list, you can create a custom parameter with a unique identifier.

sort example.png

- Inside the handler action, you must add a new record to the list of dropped items using the Insert action, and the Remove action to remove the element from the original list.

sort flow.png

Parameters

Draggable Item

Content (Placeholder) Placeholder to put the whole draggable-item’s content. Everything inside this placeholder will be draggable.
Id (Text) Bind an ID to the draggable-item. This id will be used to identify the draggable item in drop action.
CloneOnDrag (Boolean) Decides if the draggable-item will be a clone of the original one instead of the item itself. Use clone when True.
The default value is False.
DropGroup (Text) Associate a draggable item and drop area to a group for a specific item-area relationship. Items associated to a group can only be dropped in areas of the same group.
The default value is <empty>.
Note: the "DropGroup" value is specific, ie: A draggable item with an empty DropGroup can only be dropped in an area with an empty DropGroup.

 

Drop Area

Content (Placeholder) Placeholder to put the Drop Area content. Everything inside this placeholder will be a Drop Area.
Draggable items can be used inside Drop Area.
Id (Text) Bind an ID to the Drop Area. This ID will be used to identify the Drop Area in drop action
DropGroup (Text) Associate a draggable item and drop area to a group for a specific item-area relationship. Areas associated with a group can only receive items of the same group. 
The default value is <empty>.
Note: the "DropGroup" value is specific, ie: A draggable item with an empty DropGroup can only be dropped in an area with an empty DropGroup.

Events and Customization

Refer to the list of events and classes that you can use to customize the Drag and Drop Mobile component.

  • Was this article helpful?