> For the complete documentation index, see [llms.txt](https://docs.airdev.co/canvas/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.airdev.co/canvas/canvas-library/blocks/drag-and-drop-repeating-group.md).

# Drag and Drop Repeating Group

## Overview

![](/files/cV8Wb0XVrk5ZuOnu6TTN)

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