Skip to content

Commit 0fac96c

Browse files
jtpiowolfv
jtpio
authored and
wolfv
committed
Update Drag and Drop example notebook
1 parent a343d15 commit 0fac96c

File tree

1 file changed

+73
-55
lines changed

1 file changed

+73
-55
lines changed

‎docs/source/examples/Drag and Drop.ipynb

Lines changed: 73 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,25 @@
44
"cell_type": "markdown",
55
"metadata": {},
66
"source": [
7-
"## Draggable Label"
7+
"# Drag and Drop\n",
8+
"\n",
9+
"In this notebook we introduce the `DraggableBox` and `DropBox` widgets, that can be used to drag and drop widgets."
10+
]
11+
},
12+
{
13+
"cell_type": "markdown",
14+
"metadata": {},
15+
"source": [
16+
"## Draggable Box"
817
]
918
},
1019
{
1120
"cell_type": "markdown",
1221
"metadata": {},
1322
"source": [
14-
"`DraggableLabel` is a label that can be dragged and dropped to other fields."
23+
"`DraggableBox` is a widget that wraps other widgets and makes them draggable.\n",
24+
"\n",
25+
"For example we can build a custom `DraggableLabel` as follows:"
1526
]
1627
},
1728
{
@@ -20,7 +31,7 @@
2031
"metadata": {},
2132
"outputs": [],
2233
"source": [
23-
"from ipywidgets import Label, DraggableBox, DropBox, Textarea, VBox"
34+
"from ipywidgets import Label, DraggableBox, Textarea"
2435
]
2536
},
2637
{
@@ -29,9 +40,6 @@
2940
"metadata": {},
3041
"outputs": [],
3142
"source": [
32-
"def set_drag_data(box):\n",
33-
" box.drag_data['text/plain'] = box.children[0].value\n",
34-
"\n",
3543
"def DraggableLabel(value, draggable=True):\n",
3644
" box = DraggableBox(Label(value))\n",
3745
" box.draggable = draggable\n",
@@ -51,7 +59,7 @@
5159
"cell_type": "markdown",
5260
"metadata": {},
5361
"source": [
54-
"You can drag this label anywhere (could be your shell etc.), but also to a text area:"
62+
"You can drag this label anywhere (could be your shell, etc.), but also to a text area:"
5563
]
5664
},
5765
{
@@ -67,14 +75,9 @@
6775
"cell_type": "markdown",
6876
"metadata": {},
6977
"source": [
70-
"## `on_drop` handler"
71-
]
72-
},
73-
{
74-
"cell_type": "markdown",
75-
"metadata": {},
76-
"source": [
77-
"`DraggableLabel` can also become the drop zone (you can drop other stuff on it), if you implement the `on_drop` handler."
78+
"## Drop Box\n",
79+
"\n",
80+
"`DropBox` is a widget that can receive other `DraggableBox` widgets."
7881
]
7982
},
8083
{
@@ -83,15 +86,18 @@
8386
"metadata": {},
8487
"outputs": [],
8588
"source": [
86-
"l1 = DraggableLabel(\"Drag me\")\n",
87-
"l1"
89+
"from ipywidgets import DropBox\n",
90+
"\n",
91+
"\n",
92+
"box = DropBox(Label(\"Drop on me\"))\n",
93+
"box"
8894
]
8995
},
9096
{
9197
"cell_type": "markdown",
9298
"metadata": {},
9399
"source": [
94-
"Now, drag this label on the label below."
100+
"`DropBox` can become the drop zone (you can drop other stuff on it) by implementing the `on_drop` handler:"
95101
]
96102
},
97103
{
@@ -100,21 +106,36 @@
100106
"metadata": {},
101107
"outputs": [],
102108
"source": [
103-
"l2 = DropBox(Label(\"Drop on me\"))\n",
104109
"def on_drop_handler(widget, data):\n",
105110
" \"\"\"\"Arguments:\n",
106111
" \n",
107-
" widget : widget class\n",
112+
" widget : Widget class\n",
108113
" widget on which something was dropped\n",
109114
" \n",
110115
" data : dict\n",
111116
" extra data sent from the dragged widget\"\"\"\n",
112-
" print(data)\n",
113117
" text = data['text/plain']\n",
114118
" widget.child.value = \"congrats, you dropped '{}'\".format(text)\n",
115119
"\n",
116-
"l2.on_drop(on_drop_handler)\n",
117-
"l2"
120+
"box.on_drop(on_drop_handler)\n",
121+
"box"
122+
]
123+
},
124+
{
125+
"cell_type": "markdown",
126+
"metadata": {},
127+
"source": [
128+
"Now, drag this label on the box above."
129+
]
130+
},
131+
{
132+
"cell_type": "code",
133+
"execution_count": null,
134+
"metadata": {},
135+
"outputs": [],
136+
"source": [
137+
"label = DraggableLabel(\"Drag me\")\n",
138+
"label"
118139
]
119140
},
120141
{
@@ -135,14 +156,14 @@
135156
"cell_type": "markdown",
136157
"metadata": {},
137158
"source": [
138-
"If you have more specific needs for the drop behaviour you can also use DropBox widgets, which implements `on_drop` handlers."
159+
"If you have more specific needs for the drop behavior you can implement them in the DropBox `on_drop` handler."
139160
]
140161
},
141162
{
142163
"cell_type": "markdown",
143164
"metadata": {},
144165
"source": [
145-
"This DropBox will replace elements with text of the dropped element (works also for stuff which is not widget):"
166+
"This DropBox creates new `Button` widgets using the text data of the `DraggableLabel` widget."
146167
]
147168
},
148169
{
@@ -151,7 +172,7 @@
151172
"metadata": {},
152173
"outputs": [],
153174
"source": [
154-
"from ipywidgets import DropBox, Layout, Button\n",
175+
"from ipywidgets import Button, Layout\n",
155176
"\n",
156177
"label = DraggableLabel(\"Drag me\", draggable=True)\n",
157178
"label"
@@ -170,12 +191,11 @@
170191
"metadata": {},
171192
"outputs": [],
172193
"source": [
173-
"box = DropBox(Label(\"Drop here!\"),\n",
174-
" layout=Layout(width='200px', height='100px'))\n",
175194
"def on_drop(widget, data):\n",
176195
" text = data['text/plain']\n",
177196
" widget.child = Button(description=text.upper())\n",
178197
"\n",
198+
"box = DropBox(Label(\"Drop here!\"), layout=Layout(width='200px', height='100px'))\n",
179199
"box.on_drop(on_drop)\n",
180200
"box"
181201
]
@@ -184,14 +204,14 @@
184204
"cell_type": "markdown",
185205
"metadata": {},
186206
"source": [
187-
"## Adding widgets to container with a handler"
207+
"## Adding widgets to a container with a handler"
188208
]
189209
},
190210
{
191211
"cell_type": "markdown",
192212
"metadata": {},
193213
"source": [
194-
"You can also reproduce the Box example (adding elements to Box container) using `DropBox` with a custom handler:"
214+
"You can also reproduce the Box example (adding elements to a `Box` container) using a `DropBox` with a custom handler:"
195215
]
196216
},
197217
{
@@ -200,8 +220,6 @@
200220
"metadata": {},
201221
"outputs": [],
202222
"source": [
203-
"from ipywidgets import DropBox, Layout, Label\n",
204-
"\n",
205223
"label = DraggableLabel(\"Drag me\", draggable=True)\n",
206224
"label"
207225
]
@@ -212,13 +230,13 @@
212230
"metadata": {},
213231
"outputs": [],
214232
"source": [
215-
"box = DropBox(VBox([Label('Drop here')]), \n",
216-
" layout=Layout(width='200px', height='100px'))\n",
233+
"from ipywidgets import VBox\n",
217234
"\n",
218235
"def on_drop(widget, data):\n",
219236
" source = data['widget']\n",
220237
" widget.child.children += (source, )\n",
221238
"\n",
239+
"box = DropBox(VBox([Label('Drop here')]), layout=Layout(width='200px', height='100px'))\n",
222240
"box.on_drop(on_drop)\n",
223241
"box"
224242
]
@@ -227,7 +245,7 @@
227245
"cell_type": "markdown",
228246
"metadata": {},
229247
"source": [
230-
"**Explanation**: Label widget sets data on the drop event of type `application/x-widget` that contains the widget id of the dragged widget."
248+
"**Explanation**: The `Label` widget sets data on the drop event of type `application/x-widget` that contains the widget id of the dragged widget."
231249
]
232250
},
233251
{
@@ -241,7 +259,7 @@
241259
"cell_type": "markdown",
242260
"metadata": {},
243261
"source": [
244-
"You can also set custom data on `DraggableLabel` that can be retreived and used in `on_drop` event."
262+
"You can also set custom data on a `DraggableBox` widget that can be retrieved and used in `on_drop` event."
245263
]
246264
},
247265
{
@@ -252,9 +270,9 @@
252270
},
253271
"outputs": [],
254272
"source": [
255-
"l = DraggableLabel(\"Drag me\", draggable=True)\n",
256-
"l.drag_data = {'application/custom-data' : 'Custom data'}\n",
257-
"l"
273+
"label = DraggableLabel(\"Drag me\", draggable=True)\n",
274+
"label.drag_data = {'application/custom-data' : 'Custom data'}\n",
275+
"label"
258276
]
259277
},
260278
{
@@ -263,8 +281,6 @@
263281
"metadata": {},
264282
"outputs": [],
265283
"source": [
266-
"l2 = DropBox(Label(\"Drop here\"))\n",
267-
"\n",
268284
"def on_drop_handler(widget, data):\n",
269285
" \"\"\"\"Arguments:\n",
270286
" \n",
@@ -277,12 +293,12 @@
277293
" text = data['text/plain']\n",
278294
" widget_id = data['widget'].model_id\n",
279295
" custom_data = data['application/custom-data']\n",
280-
" widget.child.value = (\"you dropped widget ID '{}...' \"\n",
281-
" \"with text '{}' and custom data '{}'\"\n",
282-
" ).format(widget_id[:5], text, custom_data)\n",
296+
" value = \"you dropped widget ID '{}...' with text '{}' and custom data '{}'\".format(widget_id[:5], text, custom_data)\n",
297+
" widget.child.value = value\n",
283298
"\n",
284-
"l2.on_drop(on_drop_handler)\n",
285-
"l2"
299+
"box = DropBox(Label(\"Drop here\"))\n",
300+
"box.on_drop(on_drop_handler)\n",
301+
"box"
286302
]
287303
},
288304
{
@@ -296,7 +312,7 @@
296312
"cell_type": "markdown",
297313
"metadata": {},
298314
"source": [
299-
"`DraggableBox` can be used to wrap any widget so that it can be dragged and dropped."
315+
"`DraggableBox` can be used to wrap any widget so that it can be dragged and dropped. For example sliders can also be dragged:"
300316
]
301317
},
302318
{
@@ -361,9 +377,9 @@
361377
"metadata": {},
362378
"outputs": [],
363379
"source": [
380+
"import json\n",
364381
"import bqplot.pyplot as plt\n",
365-
"from ipywidgets import Label, GridspecLayout, DropBox, Layout\n",
366-
"import json"
382+
"from ipywidgets import Label, GridspecLayout, DropBox, Layout"
367383
]
368384
},
369385
{
@@ -395,12 +411,13 @@
395411
"metadata": {},
396412
"outputs": [],
397413
"source": [
398-
"box = DropBox(Label(\"Drag data from the table and drop it here.\"), layout=Layout(height='500px', width='800px'))\n",
399414
"def box_ondrop(widget, data):\n",
400415
" fig = plt.figure()\n",
401416
" y = json.loads(data['data/app'])\n",
402417
" plt.plot(y)\n",
403418
" widget.child = fig\n",
419+
" \n",
420+
"box = DropBox(Label(\"Drag data from the table and drop it here.\"), layout=Layout(height='500px', width='800px'))\n",
404421
"box.on_drop(box_ondrop)"
405422
]
406423
},
@@ -454,8 +471,8 @@
454471
"metadata": {},
455472
"outputs": [],
456473
"source": [
457-
"from ipywidgets import SelectMultiple, Layout, DraggableBox, DropBox, HBox\n",
458474
"import bqplot as bq\n",
475+
"from ipywidgets import SelectMultiple, Layout, DraggableBox, DropBox, HBox\n",
459476
"\n",
460477
"select_list = SelectMultiple(\n",
461478
" options=['Apples', 'Oranges', 'Pears'],\n",
@@ -465,10 +482,11 @@
465482
")\n",
466483
"select_box = DraggableBox(select_list, draggable=True)\n",
467484
"\n",
468-
"fruits = {'Apples' : 5,\n",
469-
" 'Oranges' : 1,\n",
470-
" 'Pears': 3}\n",
471-
"\n",
485+
"fruits = {\n",
486+
" 'Apples' : 5,\n",
487+
" 'Oranges' : 1,\n",
488+
" 'Pears': 3\n",
489+
"}\n",
472490
"\n",
473491
"fig = bq.Figure(marks=[], fig_margin = dict(left=50, right=0, top=0, bottom=70))\n",
474492
"fig.layout.height='300px'\n",

0 commit comments

Comments
 (0)