フラグメントドロップゾーンの定義¶
ドロップゾーンは、コンテンツページの構築に不可欠です。 それらを使用して、ユーザーが他のフラグメントとウィジェットをドラッグアンドドロップできるフラグメント内の領域を定義することにより、独自のページレイアウトと動的表示を作成できます。
ドロップゾーンを定義するには、次の手順に従います。
［サイト管理］ → ［デザイン］ → ［フラグメント］ へ移動します。
［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>
この画像は、コンテントページエディターのサイドバーに結果を示しています。
定義したら、フラグメントまたはウィジェットをドロップゾーンにドラッグアンドドロップできます。
フラグメントコードのドロップゾーンを特定する¶
LiferayDXP7.4以降で利用できます。
ドロップゾーンを特定したい場合は、 data-lfr-drop-zone-id HTML属性を <lfr-drop-zone></lfr-drop-zone> ラベルに記述してください。 Liferay DXP 7.4以降で作成するフラグメントには、デフォルトで data-lfr-drop-zone id1HTML属性が含まれています。
次の例は、 data-lfr-drop-zone-id 属性を使用して、タブフラグメント内のドロップゾーンを特定する方法を示しています。
<div class="tab-panel">
[#list 0..configuration.numberOfTabs-1 as i]
<div aria-labelledby="tab${i+1}-${fragmentEntryLinkNamespace}" class="tab-panel-item d-none" data-fragment-namespace="${fragmentEntryLinkNamespace}" id="tabPanel${i+1}-${fragmentEntryLinkNamespace}" role="tabpanel" tabindex="0">
<lfr-drop-zone data-lfr-drop-zone-id="${i+1}"></lfr-drop-zone>
</div>
[/#list]
</div>
ちなみに
フラグメント内のドロップゾーンおよびその他の要素の順序を構成できます。 詳細については、フラグメント内の要素の順序を設定する を参照してください。