# Drag and Drop Repeating Group

## Overview

![](https://4051367598-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FD8v0DEN20QQwdYStdXm8%2Fuploads%2Fci8LpQVNmmLTwSBXijj2%2Fdrag.png?alt=media\&token=b891b985-0518-4d79-b1d6-2c234f086ced)

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