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中更改事件绑定的位置，这是在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上找到一个小例子。

Primefaces Draggable Drop Position

1 个答案: