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);
}

非常感谢您的帮助。提前致谢。

- Umur İnan

Answer 1

PrimeFaces使用jQuery UI .droppable()，要获取位置，您应该在PrimeFaces.widget.Droppable中更改事件绑定，这是在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。

- Hatem Alimam