Skip to content

Commit f61d402

Browse files
pinkeshmarspinkeshmars
committed
Added drag events
1 parent 8f1ef34 commit f61d402

File tree

1 file changed

+114
-25
lines changed

1 file changed

+114
-25
lines changed

‎docs/resources/ui/widgets/built-in-widgets/draggable.md

Lines changed: 114 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -14,19 +14,37 @@ For example, in a shopping cart app, you could use these widgets together to all
1414

1515
Let's see how to add a drag-and-drop functionality by building an example that allows users to put only plants on the shelf. Here's how it looks:
1616

17-
<div class="video-container"><iframe src="https://www.loom.
18-
com/embed/68dcc413ad664a7e887e4e305aaec6c2?sid=59c1dcf4-2b71-4dd4-9f13-4cee933bcaf4" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></div>
19-
17+
<div style={{
18+
position: 'relative',
19+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
20+
height: 0,
21+
width: '100%'}}>
22+
<iframe
23+
src="https://www.loom.
24+
com/embed/68dcc413ad664a7e887e4e305aaec6c2?sid=59c1dcf4-2b71-4dd4-9f13-4cee933bcaf4"
25+
title=""
26+
style={{
27+
position: 'absolute',
28+
top: 0,
29+
left: 0,
30+
width: '100%',
31+
height: '100%',
32+
colorScheme: 'light'
33+
}}
34+
frameborder="0"
35+
loading="lazy"
36+
webkitAllowFullScreen
37+
mozAllowFullScreen
38+
allowFullScreen
39+
allow="clipboard-write">
40+
</iframe>
41+
</div>
42+
<p></p>
2043

2144
<p></p>
2245

2346
The steps to build such an example are as follows:
2447

25-
1. [Create page state variable](#1-create-page-state-variable)
26-
2. [Add Draggable widgets](#2-add-draggable-widgets)
27-
3. [Add DragTarget widget](#3-add-dragtarget-widget)
28-
4. [Get notified on drag events](#4-get-notified-on-drag-events)
29-
3048
### 1. Create page state variable
3149

3250
In this example, we have two images of a shelf: one with empty space for one plant and another
@@ -57,10 +75,42 @@ In this example, the draggable items are a plant, a spoon, and a football. Let's
5775
2. Inside the **Draggable** widget, you can add any widget as a child widget. For this example, we use the **Image** widget.
5876
3. To add data to draggable widgets, select the **Draggable widget > Properties Panel > Draggable Properties >** specify the **Type** of the data and its **Value**.
5977

60-
<div class="video-container"><iframe src="https://www.loom.
61-
com/embed/09755c639a8f4aaaa2ea2df8bb8b0324?sid=c4738082-d7ee-4e9b-8940-e887334e476b" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></div>
78+
<div style={{
79+
position: 'relative',
80+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
81+
height: 0,
82+
width: '100%'}}>
83+
<iframe
84+
src="https://www.loom.
85+
com/embed/09755c639a8f4aaaa2ea2df8bb8b0324?sid=c4738082-d7ee-4e9b-8940-e887334e476b"
86+
title=""
87+
style={{
88+
position: 'absolute',
89+
top: 0,
90+
left: 0,
91+
width: '100%',
92+
height: '100%',
93+
colorScheme: 'light'
94+
}}
95+
frameborder="0"
96+
loading="lazy"
97+
webkitAllowFullScreen
98+
mozAllowFullScreen
99+
allowFullScreen
100+
allow="clipboard-write">
101+
</iframe>
102+
</div>
103+
<p></p>
62104

105+
:::info
106+
The Draggable widget also provides you with various drag events (as [**Action Triggers**](../../../control-flow/functions/action-triggers.md)) that you might want to use to customize the drag experience. These include:
63107

108+
- **On Drag Started**: Gets triggered when the user initiates a drag operation.
109+
- **On Drag Update**: Gets triggered when the drag is currently in progress, allowing you to track its movement or update other UI elements accordingly.
110+
- **On Drag Completed**: Gets triggered when the user successfully drags and drops the widget into [**DragTarget**](#3-add-dragtarget-widget) widget.
111+
- **On Drag Cancelled**: Gets triggered when the drag operation is aborted, such as when the user releases the widget outside a **DragTarget** or the DragTarget rejects the widget.
112+
- **On Drag End**: Gets triggered when the drag operation finishes, regardless of whether it was completed or cancelled.
113+
:::
64114

65115
### 3. Add DragTarget widget
66116

@@ -72,10 +122,33 @@ Let's see how to add DragTarget widget:
72122
2. Inside the **DragTarget** widget, add a [**Container**](../../widgets/basic-widgets/container.md) widget, preferably of the same size as the image, and set its background color to transparent. This will serve as the drop zone for draggable items.
73123
3. Now, you need to specify the type of data this target will receive. To do so select the **DragTarget widget > Properties Panel > Draggable Properties >** specify the **Type** of the data. This is crucial for ensuring that only the correct items can be dropped on the target.
74124

75-
<div class="video-container"><iframe src="https://www.loom.
76-
com/embed/ffe78e15510d4cf2b34c1bbe0a54bad2?sid=97dadbab-779b-41ac-a23f-4f8d42e067b3" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></div>
77-
78125

126+
<div style={{
127+
position: 'relative',
128+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
129+
height: 0,
130+
width: '100%'}}>
131+
<iframe
132+
src="https://www.loom.
133+
com/embed/ffe78e15510d4cf2b34c1bbe0a54bad2?sid=97dadbab-779b-41ac-a23f-4f8d42e067b3"
134+
title=""
135+
style={{
136+
position: 'absolute',
137+
top: 0,
138+
left: 0,
139+
width: '100%',
140+
height: '100%',
141+
colorScheme: 'light'
142+
}}
143+
frameborder="0"
144+
loading="lazy"
145+
webkitAllowFullScreen
146+
mozAllowFullScreen
147+
allowFullScreen
148+
allow="clipboard-write">
149+
</iframe>
150+
</div>
151+
<p></p>
79152

80153
### 4. Get notified on drag events
81154

@@ -106,19 +179,35 @@ and click **Open**. This will open an **Action Flow Editor** in a new popup wind
106179
5. From the **set variable** menu, select **Drag Target > Dragged Data**. This captures the data of the draggable item that we added in [step 2](#2-add-draggable-widgets).
107180
8. Check if the captured data matches the expected item, i.e., plant.
108181
11. In the **TRUE** branch, you can add a [snackbar message](../../pages/page-elements.md#snackbar) and [update](../../pages/page-lifecycle.md#page-state) the `isShelfFull` variable to True. This will create an effect like the user has actually dragged and dropped the item onto the shelf.
109-
3. Now, select the **On Drag Exit** andadd an action to [update](../../pages/page-lifecycle.md#page-state) the `isShelfFull` variable to False. This ensures that if the user decides not to drop the item and moves it away, the shelf image reverts to the empty one.
110-
111-
<details>
112-
<summary>On Drag Accept</summary>
113182

114-
<div class="video-container"><iframe src="https://www.loom.
115-
com/embed/53acd90e5f394581951173d4626c68a9?sid=0438be54-ed23-46e8-9f45-2cc36974037d" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></div>
116183

184+
<div style={{
185+
position: 'relative',
186+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
187+
height: 0,
188+
width: '100%'}}>
189+
<iframe
190+
src="https://www.loom.
191+
com/embed/53acd90e5f394581951173d4626c68a9?sid=0438be54-ed23-46e8-9f45-2cc36974037d"
192+
title=""
193+
style={{
194+
position: 'absolute',
195+
top: 0,
196+
left: 0,
197+
width: '100%',
198+
height: '100%',
199+
colorScheme: 'light'
200+
}}
201+
frameborder="0"
202+
loading="lazy"
203+
webkitAllowFullScreen
204+
mozAllowFullScreen
205+
allowFullScreen
206+
allow="clipboard-write">
207+
</iframe>
208+
</div>
209+
<p></p>
117210

118-
</details>
119-
120-
<details>
121-
<summary>On Drag Exit</summary>
211+
3. Now, select the **On Drag Exit** andadd an action to [update](../../pages/page-lifecycle.md#page-state) the `isShelfFull` variable to False. This ensures that if the user decides not to drop the item and moves it away, the shelf image reverts to the empty one.
122212

123-
![img_2.png](imgs/img_2.png)
124-
</details>
213+
![img_2.png](imgs/img_2.png)

0 commit comments

Comments
 (0)