React-Grid-Layout v1.5.1 Demo 15 - Drag From Outside

This demo shows what happens when an item is added from outside of the grid.

Once you drop the item within the grid you'll get its coordinates/properties and can perform actions with it accordingly.

Displayed as [x, y, w, h]:
0: [4, 0, 2, 4]
1: [6, 0, 2, 2]
2: [2, 0, 2, 2]
3: [6, 2, 2, 4]
4: [10, 0, 2, 5]
5: [6, 6, 2, 5]
6: [10, 5, 2, 3]
7: [6, 11, 2, 5]
8: [4, 4, 2, 4]
9: [0, 0, 2, 5]
10: [2, 2, 2, 3]
11: [2, 7, 2, 5]
12: [2, 12, 2, 4]
13: [8, 8, 2, 4]
14: [6, 20, 2, 5]
15: [0, 8, 2, 5]
16: [6, 16, 2, 4]
17: [2, 5, 2, 2]
18: [4, 12, 2, 4]
19: [8, 6, 2, 2]
20: [0, 13, 2, 5]
21: [8, 12, 2, 3]
22: [0, 5, 2, 3]
23: [4, 9, 2, 3]
24: [4, 16, 2, 3]
Current Breakpoint: lg (12 columns)
Compaction type: Vertical
Droppable Element (Drag me!)
0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
Static - 19
20
21
22
Static - 23
24