Question

我正在使用primefaces开发一个项目。

在那里，我在p:panel中使用了一个p:dialog（在user.xhtml页面中），并将showHeader="false"设置为p:dialog。

为此，当我点击并拖动p:dialog内的p:panel时，我需要拖动p:dialog。

示例代码：

<p:dialog showHeader="false">      

     <ui:include src="${model.dynamicPage}"/>     

</p:dialog>

user.xhtml

<h:form id="userForm">
   <p:panel header="UserPanel">
     .......
   </p:panel>
</h:form>

任何想法？

Answer 1

使用面板上的draggable组件而不是对话框

<p:panel id="pnl" header="UserPanel">      
     <ui:include src="${model.dynamicPage}"/>     
</p:panel>
<p:draggable for="pnl" />

并使用一些css定义面板尺寸：

.ui-panel {
    margin: 15px;
    height: 200px;
    width: 300px;
}

修改：如果您的model.dynamicPage facelet中有多个组件，但您希望该面板是唯一允许处理整个容器拖动的组件，请为其添加一个css类并使用此类限制可拖动组件处理：

例如

<p:panel id="pnl" showHeader="false">      
     <ui:include src="${model.dynamicPage}"/>     
</p:panel>
<p:draggable for="pnl" handle=".my-handle-classname" />

和

<h:form id="userForm">
   <p:panel header="UserPanel" styleClass="my-handle-classname">
     .......
   </p:panel>
</h:form>

如何在primefaces中不使用showHeader =“true”拖动p：对话框？

1 个答案: