如何在不使用 showHeader= "true" 的情况下拖动 p：dialog 在素数中？

Question

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

在其中，我在p:dialog内使用了一个p:panel(在用户.xhtml页面中(，并将showHeader="false"设置为p:dialog。

为此，当我单击并拖动p:panel时，我需要拖动p:dialog，该p:dialog包含在 中。

示例代码：

<p:dialog showHeader="false">      
     <ui:include src="${model.dynamicPage}"/>     
</p:dialog>

用户.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>