Expand my Community achievements bar.

July 31st AEM Gems Webinar: Elevate your AEM development to master the integration of private GitHub repositories within AEM Cloud Manager.

Rearrange child components by drag-n-move


Level 2

Hi All,


Again I got a challenging task (at least for me) :).

We have a component with four child components/card in it (Fig-1). Each of the card can be configured separately as shown below. This creates JCR structure below Fig-2. 

Requirement is - content author wants to rearrange cards by drag-n-drop, meaning they want flexibility to move card#2 after card#3 or card#4 before card#1 etc. by click, drag and drop. Just like they can arrange components in one after or before other component in a page (Fig-3). 



Fig -1 


Fig - 2


Fig- 3


Can anyone provide any reference or solution idea to implement it? Any help would be appreciated. 



@Kautuksahni @aanchalsikka 


Topics help categorize Community content and increase your ability to discover relevant content.

4 Replies


Level 3

Hi @prithwi,


I think you need a component with a childreneditor dialog enabled. Basically it is a component with a dialog in which you can add other components and rearrange them on the go. You can also define which components you would like to allow as child components. Please see the below for reference - the stack icon will show you how many child components have been added and those can be rearranged as well.


Hope this helps!


Level 2

Thanks @rk_pandian for your idea and quick response. I'll try to explore this. It will be really helpful if you could share sample code or steps to implement this. 


Level 3

Hi @prithwi,


Maybe another approach will help you (which might be easy):

  1. Create a container component like "visual-filter-container"
  2. Allow only visualFilter component to be dropped inside
  3. Add the visualFilter components and you should be able to re-order them.

This approach is not fancy as the above, but this could be simple to implement.