Drag surface
I need to get the dragging position of a dragged panel. But I cannot figure out how to do this. I tried to get the style, but I have 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 bean support:
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 would be appreciated. Thanks in advance.
source to share
PrimeFaces uses jQuery UI .droppable()
to get the position, you have to change the event binding in PrimeFaces.widget.Droppable
, this is done in bindDropListener
.
After adding a couple of query parameters to the original query, 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);
}
}
};
}
This change adds two more parameters to the ext
query parameters , where the position of the item being dragged is present (left, top).
On the other side of the event, onDrop(DragDropEvent dragDropEvent)
you can find them as request parameters, as I 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 must be present in p:droppable
(as in the question)
source to share