Primefaces Draggable Drop Position

Question

I need to get the drop position of a draggable panel. But i cannot figure out how to do it. I've tried to get the style but I've got unrelated information.

Here is my 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>

Here is my backing 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);
}

Any help will be appreciated. Thanks in advance.

Answer 1

PrimeFaces is using jQuery UI .droppable(), to get the position you should alter the event binding in PrimeFaces.widget.Droppable, this is done in bindDropListener.

Adding a couple of request params to the original request would do it, here's an example:

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

The change here is adding two more parameters to the ext params of the request, where the positions of the draggable item (left, top) are present.

On the other side of the event onDrop(DragDropEvent dragDropEvent), you can find them as request parameters as I have mentioned.

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

Note: the ajax event should be present in p:droppable (as in the question)

You can find a small example on github, and a working demo.