如何在 Primefaces 中不使用 showHeader="true" 拖动 p:dialog？答案

【问题标题】：How to drag the p:dialog without use showHeader="true" in primefaces?如何在 Primefaces 中不使用 showHeader="true" 拖动 p:dialog？
【发布时间】：2015-05-31 05:48:34
【问题描述】：

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

其中，我在p:dialog 中使用了一个p:panel（在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>

有什么想法吗？

【问题讨论】：

标签： jsf primefaces

【解决方案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>

【讨论】：

感谢您的回复。希望对我的项目有所帮助。
@Zim....您的代码运行良好，但不符合我的期望。我需要拖动 p:dialog 中包含的 p:panel。当 p:panel 可拖动时，p:dialog 也可以基于 p:panel(position) 拖动。
我需要使用 ui:include 在 p:dialog 中包含 3 个页面。所以我得到了两个头，一个来自 p:dialog，第二个来自 p:panel，所以视图不好所以我删除了一个 p:dialog 的头。通过没有 p:dialog 头不能拖动 p:dialog 所以我有一个想法来拖动 p: 面板。
是的，我试过.....它可以正常拖动面板......不在 p:dialog 的 p:panel 内.....如果我拖动位于p:panel 只拖动而不拖动 p:dialog 的 p:dialog。
我认为你必须只使用p:panel 组件，而不是p:dialog。因此，这很好用：<p:panel id="pnl" showHeader="false" style="width:300px; height: 200px"> <p:panel header="Greet" style="width: 100%; height: 100px;" styleClass="foo"> Hello world! </p:panel> </p:panel> <p:draggable for="pnl" handle=".foo" />