jsf - Primefaces 可拖动放置位置

Question

我需要获取可拖动面板的放置位置。但我不知道该怎么做。我已经尝试获取样式，但我得到了不相关的信息。

这是我的 xhtml:

<h:form id="dnd">

   <p:panel id="draggable1" 
            style="z-index:1; width: 60px; height: 60px;">
       <h:outputText value="CAM-1" />
       <p:draggable for="draggable1" 
                    revert ="false"/>
   </p:panel>

   <p:panel id="droppable" 
            style="z-index:1; width: 600px; height: 600px;">
      <p:droppable for="droppable"> 
          <p:ajax listener="#{myBean.onDrop}" />
      </p:droppable>
   </p:panel>

</h:form>

这是我的支持 bean:

public void onDrop(DragDropEvent dragDropEvent) {
    String dragId = dragDropEvent.getDragId();

    UIComponent draggedItem = FacesContext.getCurrentInstance().getViewRoot().findComponent(dragId);

    System.out.println(draggedItem.getClientId());
    Panel draggedPanel = (Panel) draggedItem;

    String style = draggedPanel.getStyle();
    System.out.println(style);

    String styleClass = draggedPanel.getStyleClass();
    System.out.println(styleClass);
}

任何帮助将不胜感激。提前致谢。

Answer 1

PrimeFaces 正在使用 jQuery UI .droppable() ，要获得位置，您应该更改 PrimeFaces.widget.Droppable 中的事件绑定(bind)，这是在 bindDropListener 中完成的.

在原始请求中添加几个请求参数就可以了，下面是一个例子:

PrimeFaces.widget.Droppable.prototype.bindDropListener = function() {
   var _self = this;

   this.cfg.drop = function(event, ui) {
       if (_self.cfg.onDrop) {
           _self.cfg.onDrop.call(_self, event, ui);
       }
       if (_self.cfg.behaviors) {
           var dropBehavior = _self.cfg.behaviors['drop'];

           if (dropBehavior) {
               var ext = {
                    params: [
                       {name: _self.id + '_dragId', value: ui.draggable.attr('id')},
                       {name: _self.id + '_dropId', value: _self.cfg.target},
                       {name: ui.draggable.attr('id') + '_left', value: ui.position.left},
                       {name: ui.draggable.attr('id') + '_top', value: ui.position.top}
                    ]
                };

                dropBehavior.call(_self, ext);
           }
       }
    };
}

这里的变化是在请求的 ext 参数中增加了两个参数，其中存在可拖动项的位置(左、上)。

在事件onDrop(DragDropEvent dragDropEvent)的另一边，你可以找到它们作为我提到的请求参数。

public void onDrop(DragDropEvent dragDropEvent) {
    String dargId = dragDropEvent.getDragId();
    Map<String, String> params = FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap();
    String left = params.get(dargId + "_left");
    String top = params.get(dargId + "_top");
}

注意:ajax 事件应该出现在 p:droppable 中(如问题所示)

您可以在 github 上找到一个小示例, 和工作 demo .