Exception thrown as Fieldset cannot be cast to UIData - jsf

Question

Trying to develop a drag and drop functionality. A fieldSet in a layout has to be dragged and imitate user as if it is being dropped into another layout. Below is the xhtml code for the same :-
<h:head>
<script type="text/javascript">
function handleDrop(event, ui) {
var dropped = ui.draggable;
dropped.fadeOut('fast');
}
</script>
</h:head>
<h:body>
<h:form>
HI
<h1>Primefaces Basic Config</h1>
<p:layout style="min-width:400px;min-height:200px;">
<p:layoutUnit id="first" position="west">
<p:fieldset id="ppl" legend="Builder" toggleable="true" toggleSpeed="500" style="width:300px">
<h:panelGrid columns="2" cellpadding="5">
<h:outputText value="Bla bla bla"></h:outputText>
</h:panelGrid>
</p:fieldset>
<p:draggable for="ppl" revert="true" />
</p:layoutUnit>
<p:layoutUnit id="second" position="center">
<p:tabView id="dropdownpanel">
<p:tab title="Edit">
<h:panelGrid columns="2" cellpadding="10">
<h:outputText
value="Add question details" />
</h:panelGrid>
</p:tab>
<p:tab title="Option">
<h:panelGrid columns="2" cellpadding="10">
<h:outputText value="addtional options required" />
</h:panelGrid>
</p:tab>
<p:tab title="Logic">
<h:panelGrid columns="2" cellpadding="10">
<h:outputText value="addd logic to this tab" />
</h:panelGrid>
</p:tab>
</p:tabView>
</p:layoutUnit>
<p:droppable for="second" tolerance="touch" datasource="ppl" onDrop="handleDrop" >
<p:ajax update="first second" />
</p:droppable>
</p:layout>
</h:form>
</h:body>
</h:form>
Following is the screen shot of what i'm trying to achieve where builder fieldset can be dragged into edit area:-
But when i'm trying to drag BUILDER then following Exception is thrown :-
15:53:05,497 INFO
[javax.enterprise.resource.webcontainer.jsf.context]
(http-0.0.0.0-0.0.0.0-8081-1) java.lang.ClassCastException:
org.primefaces.component.fieldset.Fieldset cannot be cast to
javax.faces.component.UIData: java.lang.ClassCastException:
org.primefaces.component.fieldset.Fieldset cannot be cast to
javax.faces.component.UIData at
org.primefaces.component.dnd.Droppable.findDatasource(Droppable.java:231)
[primefaces-4.0.jar:4.0] at
org.primefaces.component.dnd.Droppable.queueEvent(Droppable.java:189)
[primefaces-4.0.jar:4.0] at
org.primefaces.component.behavior.ajax.AjaxBehaviorRenderer.decode(AjaxBehaviorRenderer.java:44)
[primefaces-4.0.jar:4.0] at
javax.faces.component.behavior.ClientBehaviorBase.decode(ClientBehaviorBase.java:132)
[jboss-jsf-api_2.1_spec-2.0.1.Final.jar:2.0.1.Final] at
org.primefaces.renderkit.CoreRenderer.decodeBehaviors(CoreRenderer.java:395)
[primefaces-4.0.jar:4.0] at
org.primefaces.component.dnd.DroppableRenderer.decode(DroppableRenderer.java:32)
[primefaces-4.0.jar:4.0] at
javax.faces.component.UIComponentBase.decode(UIComponentBase.java:787)
[jboss-jsf-api_2.1_spec-2.0.1.Final.jar:2.0.1.Final] at
javax.faces.component.UIComponentBase.processDecodes(UIComponentBase.java:1181)
[jboss-jsf-api_2.1_spec-2.0.1.Final.jar:2.0.1.Final]
And i've no clue to resolve.

Answer 1

The datasource attribute in your p:droppable element needs to refer to a UIData. Fieldset is not a UIData. If you look at the UIData Javadoc you will see that HtmlDatatable is a known subclass
I had the same problem and resolved by referencing my datatable instead of the fieldset. In your case you are using a h:panelGrid, so change
<h:panelGrid columns="2" cellpadding="5" >
to a datatable, give it an ID. Say "datasrc1".
And change your droppable's datasource to:
<p:droppable for="second" tolerance="touch" datasource="datasrc1" onDrop="handleDrop" >