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(), to get the position you should alter the event binding in PrimeFaces.widget.Droppable, this is done in 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, and a working demo 上找到一个小例子。

Primefaces 可拖动放置位置

Primefaces Draggable Drop Position

jsf

drag-and-drop

primefaces