Drag and Drop - droppable area

[BojanSM]

First of all I must say that I did everything exactly the same like it is in showcase: http://www.primefaces.org/showcase-labs/ui/dndGrid.jsf
Everything is same except I have my custom class: Cena. Anyway, the problem is not here. What I get is panels that I can drag, but when I drag them to '<p:outputPanel id="dropArea">' nothing happens. Output panel is not highlighted, it is white as usual. And, of course I never reach onCenaDrop method.

I can not describe how frustrated I am, currently.

This is my jsf page:

Code: Select all

<h:body>
        <div style="padding-top: 30px; padding-left: 30px; width: 100%; min-height: 500px;">
            <p:growl id="obavestenja"/>
            <h:form id="carForm">
                <p:fieldset legend="AvailableCars">

                    <p:dataGrid id="availableCars" var="car"
                                value="#{pmBean.cenaList}" columns="3">

                        <p:column>

                            <p:panel id="pnl" header="#{car.kriterijum.kriterijumPK.nazivKriterijuma}" style="text-align:center">
                                <h:panelGrid columns="1" style="width:100%">
                                    <h:outputText value="#{car.cena}"/>
                                </h:panelGrid>
                            </p:panel>
                            
                            <p:draggable for="pnl" revert="true"
                                         handle=".ui-panel-titlebar" stack=".ui-panel"/>

                        </p:column>
                    </p:dataGrid>
                </p:fieldset>

                <p:fieldset id="selectedCars" legend="Selected Cars" style="margin-top:20px">
                    <p:outputPanel id="dropArea">
                        <h:outputText value="!!!Drop here!!!"
                                      rendered="#{empty pmBean.droppedCenaList}"
                                      style="font-size:24px;" />

                        <p:dataTable var="car" value="#{pmBean.droppedCenaList}"
                                     rendered="#{not empty pmBean.droppedCenaList}">

                            <p:column headerText="Model">
                                <h:outputText value="#{car.kriterijum.kriterijumPK.nazivKriterijuma}" />
                            </p:column>

                            <p:column headerText="Year">
                                <h:outputText value="#{car.kriterijum.kriterijumPK.velicina}" />
                            </p:column>

                            <p:column headerText="Manufacturer">
                                <h:outputText value="#{car.cena}" />
                            </p:column>
                        </p:dataTable>
                    </p:outputPanel>
                </p:fieldset>

                <p:droppable for="selectedCars" tolerance="touch" activeStyleClass="ui-state-highlight" datasource="availableCars" onDrop="handleDrop">
                    <p:ajax listener="#{pmBean.onCenaDrop}" update="dropArea availableCars"/>
                </p:droppable>
            </h:form>
        </div>
    </h:body>

Here is onCenaDrop method:

Code: Select all

public void onCenaDrop(DragDropEvent ddEvent) {
        System.out.println("aaaaaaaaaaaaaaaaaaaaaaaaaa");
        Cena c = ((Cena) ddEvent.getData());

        droppedCenaList.add(c);
        cenaList.remove(c);
    }

[mask_hot]

take a look at the examples and check the full source code. You need a javascript function which corresponds to onDrop="handleDrop" .