Primefaces 可拖动放置位置答案

【问题标题】：Primefaces Draggable Drop PositionPrimefaces 可拖动放置位置
【发布时间】：2015-01-14 17:06:35
【问题描述】：

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

这是我的 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);
}

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

【问题讨论】：

标签： jsf primefaces drag-and-drop

【解决方案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。

【讨论】：