# Drag and Drop Repeating Group

## Overview

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 ***new\_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 Add***
* Open the ***new\_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