Drag and drop area with pre-populatd modules

[DM2]

Hi there!

I want to be able to create a very simple solution of a drag and drop area with several pre-chosen modules. I want the end user then to be able to re-order these, delete and add others in if needs be. All the modules are full width, row by row.

Essentially it's something like this:

{% dnd_area "home_body_dnd_area" label="Main section" %}

  {% dnd_section %}
      {% dnd_module path="/theme-name/modules/Hero" %}{% end_dnd_module %}
  {% end_dnd_section %}

  {% dnd_section %}
      {% dnd_module path="/theme-name/modules/CTA" %}{% end_dnd_module %}
  {% end_dnd_section %}

{% end_dnd_area %}

But what I find is that when I drag and re-order the modules in the page editor, new empty sections are created (with a "Drop Modules here" message) - Have I got the markup wrong here?

Thanks for any help

[DM2]

Many thanks @Gracjan and @Kevin-C .

Actually Kevin your revised markup with the dnd_column gets over the problem of the empty placeholder being created when I move modules. Perfect!

[Kevin-C · Accepted solution]

Hey @DM2 

First what @Gracjan has said is correct. To paint a little more context around that answer, when using the dnd_section tag your're essentially creating a container or structure for modules and other structural elements. So by moving a module out of a section it will create another section and leave the empty section. You could use a single dnd_section like so:

{% dnd_area "home_body_dnd_area" label="Main section" %}

  {% dnd_section %}
    {% dnd_column
      offset=0,
      width=12
    %}
       {% dnd_row %}
         {% dnd_module path="/theme-name/modules/Hero" %}{% end_dnd_module %}
       {% end_dnd_row %}
       {% dnd_row %}
         {% dnd_module path="/theme-name/modules/CTA" %}{% end_dnd_module %}
       {% end_dnd_row %}
    {% end_dnd_column %}
  {% end_dnd_section %}

{% end_dnd_area %}

Using the single section with a cilumn and rows will eliminate any additional structure being added to the layout. Though this will not stop the user from dragging modules into columns.

If you intention is to restrict users to the vertically stacked full width modules I might suggest a single module with a repeater that has a number of defaults that correlate to the modules you want them to use. This solution would allow them to add "modules", rearrange them vertically, and restrict column creation. I will preface this with: It is possible but not recommended. I would instead implement a authoring process and a approval process.

If you have any questions please don't hesitate to reach out!

Best,

[Gracjan]

Hi @DM2 , 
Your markup looks good! 

This behaviour is normal. When you reorder the modules and you move one module from one section into the another one, the origin section remains empty. That's why you are seeing the "Drop Modules here" message. It's actually not creating a new one since you are only re-ordering the module (what's inside the section), not the section itself. 

Best,
Gracjan