Defining Fragment Drop Zones

Drop zones are integral to building your content pages. With them, you can create unique page layouts and dynamic displays by defining areas within fragments where users can drag and drop other fragments and widgets.

Warning

Using drop zones excessively (e.g., over 100) can cause performance issues in the Page Editor. The impact may vary depending on your environment and page complexity. Consider using Grid and Container fragments instead of drop zones for better performance.

To define a drop zone,

Go to Site Administration → Design → Fragments.
Under Fragment Sets, select the set with the fragment you want to edit.
Click Actions () for the fragment you want to edit and select Edit to open the Fragments Editor.
In the HTML code area, add the <lfr-drop-zone></lfr-drop-zone> label to define a drop zone within a fragment.

Important

Drop zones cannot be added to editable elements within a fragment.

The following code excerpt shows how to use this label to define drop zones within a Tabs fragment:

<div class="tab-panel">
   [#list 0..configuration.numberOfTabs-1 as i]
   <div aria-labelledby="tab${i+1}-${fragmentEntryLinkNamespace}" class="d-none tab-panel-item" data-fragment-namespace="${fragmentEntryLinkNamespace}" id="tabPanel${i+1}-${fragmentEntryLinkNamespace}" role="tabpanel" tabindex="0">
      <lfr-drop-zone data-lfr-drop-zone-id="${i+1}" data-lfr-priority="${i+1}"></lfr-drop-zone>
   </div>
   [/#list]
</div>

Here’s the result in the content page editor sidebar:

The Tab fragment shows four different drop zones in the content page editor.

Once defined, you can drag and drop any fragment or widget into the drop zone.

Fragment Drop Zone IDs

To keep fragments in their designated drop zones, use the data-lfr-drop-zone-id attribute. Drop zone IDs ensure fragments stay in place when zones are reordered or new ones are inserted.

If you delete and propagate a drop zone with a unique ID, the zone and its content are removed. Adding a zone with the same ID restores content from unpublished drafts, but in published drafts, it’s treated as a new zone.

Drop zone IDs are optional. Zones without IDs function in the specified order. Adding IDs to an existing fragment and propagating it applies the IDs starting from the initial propagation.

Important

While data-lfr-drop-zone-id keeps content mapped to the correct zones while you edit a page, Liferay’s rendering engine maps stored content to drop zones by their order in the DOM when the page renders (VIEW mode), not by their ID.

If you use FreeMarker conditional logic (such as [#if]) to add or remove a drop zone, the total number of zones changes during rendering. Because the engine matches content to zones by position rather than by ID, the stored content shifts and appears in the wrong drop zones.

If you need conditional visibility for drop zones, choose one of these alternatives:

Hide zones with CSS: Instead of omitting the drop zone from the DOM with FreeMarker, conditionally add a hidden utility class such as d-none. This keeps the DOM structure static, so the content order doesn’t shift.
Isolate conditional wrappers: Wrap a drop zone in conditional logic only when the fragment contains exactly one drop zone. With a single zone, there are no sibling zones for content to shift into, so adding or removing it is safe.
Componentize your fragments: Break a complex fragment into multiple smaller fragments, each containing its drop zones unconditionally, so no single fragment varies its zone count.