フラグメントドロップゾーンの定義¶
ドロップゾーンは、コンテンツページの構築に不可欠です。 それらを使用して、ユーザーが他のフラグメントとウィジェットをドラッグアンドドロップできるフラグメント内の領域を定義することにより、独自のページレイアウトと動的表示を作成できます。
ドロップゾーンを定義するには、次の手順に従います。
［サイト管理］ → ［デザイン］ → ［Fragments］ へ移動します。
［Fragment Sets］で、編集したいフラグメントのあるセットを選択します。
フラグメントの アクション(
) ボタンをクリックして ［編集］ を選択し、［フラグメントエディター］を開きます。HTMLコードエリアに、
<lfr-drop-zone></lfr-drop-zone>ラベルを追加して、フラグメント内にドロップゾーンを定義することができます。重要
フラグメント内の編集可能な要素にドロップゾーンを追加することはできません。
次のコードは、このラベルを使用して、タブフラグメント内にドロップゾーンを定義する方法を示しています。
<div class="tab-panel">
[#list 0..configuration.numberOfTabs-1 as i]
<div aria-labelledby="tab${i+1}" class="tab-panel-item d-none" data-fragment-namespace="${fragmentEntryLinkNamespace}" id="tabPanel${i+1}" role="tabpanel" tabindex="0">
<lfr-drop-zone></lfr-drop-zone>
</div>
[/#list]
</div>
この画像は、コンテントページエディターのサイドバーに結果を示しています。
定義したら、フラグメントまたはウィジェットをドロップゾーンにドラッグアンドドロップできます。
Tip
ドロップゾーンにはIDがありません。 指定された順番で描画され、手動で移動することはできません。 ただし、Fragment内の他の要素の順序を設定することが可能です。