Primefaces drop event is not invoked - jsf

Question

I am using drag and drop with datagrid.
I expose for your my code.
I am using primefaces 4.0 and have followed the exemple detailed in documentation.
The problem is that the drop function dropQuery is not invoked.
<div id="columnwrap"> <p:droppable for="report" tolerance="touch" activeStyleClass="ui-state-highlight" datasource="availablequeries" onDrop="handleDrop" >
<p:ajax listener="#{dragQueryMB.dropQuery}" update="dropArea availablequeries"/>
</p:droppable>
<div id="column1">
<p:fieldset id="report" legend="Report" >
<p:outputPanel id="dropArea">
<h:outputText value="drop here" rendered="#{not empty dragQueryMB.addedQueries}" style="font-size:16px;" />
</p:outputPanel>
</p:fieldset>
</div>
</div>
<div id="column2">
<p:fieldset id="queryfield" legend="Available Queries" >
<p:commandLink value="add new Query" action="createQuery?faces-redirect=true" style="position: right" ></p:commandLink>
<p:dataGrid id="availablequeries" value="#{dragQueryMB.queryList}" var="query" columns="1">
<p:column>
<p:panel id="pnl" header="#{query.queryTitle}" style="text-align:center">
<h:panelGrid columns="1" style="width:100%">
<h:outputText value="#{query.description}" />
</h:panelGrid>
</p:panel>
</p:column>
<p:draggable for="pnl" revert="true" handle=".ui-panel-titlebar" stack=".ui-panel"/>
</p:dataGrid>
</p:fieldset>
</div>
Method dropQuery:
public void dropQuery(DragDropEvent ddEvent) {
Query query = ((Query) ddEvent.getData());
addedQueries.add(query);
queryList.remove(query);
}