Drag and Drop Repeating Group

Overview

This fully-responsive and fully-functional module 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. cc

Structure

  • When this module is added to a page, it is placed within a group called Group page860Group on the page. This group contains the responsive settings for all modules.

  • This module Group DragAndDropRG contains three main groups:

    • Group verticalPadding 1 - For responsiveness (please do not delete)

    • Group verticalPadding 2 - For responsiveness (please do not delete)

    • Group 780StandardGroup - If you add more elements to the group, please ensure that they are contained within this main content group.

  • This module has a reusable element inside of it called draggableRepeatingGroup.

    • This reusable element contains all of the logic and drag and drop UI for the module:

      • DroppableGroup - This is the group that users can drag to a different location

      • Dropzone - This is the group where users can drop the DroppableGroup (for order numbers after #2)

      • DropArea - This is the group where users can drop the DroppableGroup (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 draggableRepeatingGroup reusable and update the data source of RepeatingGroup dummy (draggable)

  • Update the data source of the texts

Last updated