# Drag and Drop Repeating Group

## Overview

![](https://1483599141-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-MW2tCDA9IUKjPv10VcE%2F-MW2tZorc6Cj5R8MR-6f%2Fimage.png?alt=media\&token=ecf57b19-73d0-4cff-a1d4-127e346044b7)

This fully-responsive and fully-functional block contains a repeating group with draggable groups and droppable zones. Users can easily sort the list by dragging and dropping a group to a different location. Before adding this block to your app, please ensure you have added the **Draggable Elements plugin** first (Bubble editor > Plugins tab > + Add plugins > Add draggable elements by Bubble).

## Structure

* When this block is added to a page, it is placed within a group called **Blocks container 860 (do not rename**) on the page. This group contains the responsive settings for all blocks.
* This block **Group DragAndDropRG** contains a reusable element inside of it called **draggablerg.** 
  * This reusable element contains all of the logic and drag and drop UI for the block:
    * **DroppableGroup\_dummy** - This is the group that users can drag to a different location
    * **Dropzone** - This is the group where users can drop the **DroppableGroup\_dummy** (for order numbers after #2)
    * **DropArea** - This is the group where users can drop the **DroppableGroup\_dummy** (and move the dragged group to #1)
* All data is displayed in **RepeatingGroup dummy (draggable)**

## How to set up

* Remove or add workflow to **Button New**
* Remove the **Group Sort by** and **Group Button Filter** elements if they are not needed
  * If you delete these elements, re-size the **Group Collapsible Sort Filter and Button** so that it only contains the remaining **Button New** element. Then, set the group to be fixed-width.
* Open the **draggablerg** reusable and update the data source of **RepeatingGroup dummy (draggable)**
  * In the workflow tab, update the workflows in the custom workflow 'Move thing' and replace any Make changes to Dummy workflows to reference the appropriate data object in your app
* Update the data source of the display texts