如何从中心点统一控制PrimeFaces Dialog组件的position属性

存在两种常用的集中控制方案，均不会破坏原生拖拽功能： #

方案1：全局默认属性配置（适用于控制所有dialog的默认定位） #

PrimeFaces支持通过上下文参数全局覆盖组件的默认属性值，无需修改每个dialog的代码，仅修改配置即可全局生效。
在项目的web.xml中添加如下配置：

<context-param>
  <param-name>primefaces.org.primefaces.component.dialog.Dialog.position</param-name>
  <param-value>top, left</param-value>
</context-param>

说明：所有未显式声明position属性的<p:dialog>都会自动使用该默认值，需要调整定位时仅修改<param-value>的内容即可全局生效。 #

方案2：公共样式类+JS批量配置（适用于控制部分dialog的定位） #

如果只需要给部分dialog统一设置定位，可以给这部分dialog添加统一的公共样式类，再通过全局JS批量注入position配置：

1. 给需要统一控制的dialog添加公共类：

<p:dialog styleClass="batch-top-left-dialog" ...>

2. 在全局引入的公共JS文件中添加如下代码：

// 监听页面加载及AJAX请求完成事件，处理动态加载的dialog
$(document).on('ready pfAjaxComplete', function() {
  $('.batch-top-left-dialog').each(function() {
    const widgetVar = $(this).attr('widgetVar');
    if (!widgetVar) return;
    const dialog = PF(widgetVar);
    // 仅给未单独设置position的dialog注入默认值
    if (dialog && !dialog.cfg.position) {
      dialog.cfg.position = 'top, left';
      dialog.initPosition();
    }
  });
});

说明：需要调整定位时仅修改JS中的position值即可，所有应用了batch-top-left-dialog类的dialog都会同步更新。 #

可选方案：封装自定义复合组件 #

如果项目中需要统一控制dialog的多个属性（不止position），可以将<p:dialog>封装为项目自定义的复合组件，例如<your:dialog>，在组件内部默认设置position="top, left"，所有业务页面统一使用自定义组件即可，调整时仅修改组件定义一处。

注：之前的CSS实现无法拖拽的核心原因是!important强制覆盖了PrimeFaces拖拽逻辑动态设置的top和left属性，同时你给出的旧代码中还存在类名不匹配的问题：dialog上设置的styleClass="dialog-top-left"和CSS定义的.top-left-dialog类名不一致。

内容的提问来源于stack exchange，提问作者Christian O.