DragDrop - DataTable

DragDrop components have special integration with data components. Drag the cars using the drag icon to the drop area.

Available Cars
IdYearBrandColor
4070fdae1992VolkswagenSilver
267f50f61968FordSilver
a48592711970FordOrange
0f6533a01972AudiBrown
86079eaf1987VolkswagenSilver
883588b11983JaguarGreen
585a762a1967AudiBlue
07f0fd0e1990VolvoBlue
827a6cc71989AudiBlue
Selected Cars
!!!Drop here!!!
Car Detail
<script type="text/javascript">
    function handleDrop(event, ui) {
        var droppedCar = ui.draggable;

        droppedCar.fadeOut('fast');
    }
</script>


<h:form id="carForm">
    <p:fieldset id="availableCarsField" legend="Available Cars">
        <p:dataTable id="availableCars" var="car" value="#{dndCarsView.cars}">
            <p:column style="width:20px">
                <h:outputText id="dragIcon" styleClass="ui-icon pi pi-plus" />
                <p:draggable for="dragIcon" revert="true" helper="clone"/>
            </p:column>

            <p:column headerText="Id">
                <h:outputText value="#{car.id}" />
            </p:column>

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

            <p:column headerText="Brand">
                <h:outputText value="#{car.brand}" />
            </p:column>

            <p:column headerText="Color">
                <h:outputText value="#{car.color}" />
            </p:column>
        </p:dataTable>
    </p:fieldset>

    <p:fieldset id="selectedCars" legend="Selected Cars" style="margin-top:20px">
        <p:outputPanel id="dropArea">
            <h:outputText value="!!!Drop here!!!" rendered="#{empty dndCarsView.droppedCars}" style="font-size:24px;" />
            <p:dataTable id="selectedCarsTable" var="car" value="#{dndCarsView.droppedCars}" rendered="#{not empty dndCarsView.droppedCars}">
                <p:column headerText="Id">
                    <h:outputText value="#{car.id}" />
                </p:column>

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

                <p:column headerText="Brand">
                    <h:outputText value="#{car.brand}" />
                </p:column>

                <p:column headerText="Color">
                    <h:outputText value="#{car.color}" />
                </p:column>

                <p:column style="width:32px">
                    <p:commandButton update=":carForm:display" oncomplete="PF('carDialog').show()" icon="pi pi-search">
                        <f:setPropertyActionListener value="#{car}" target="#{dndCarsView.selectedCar}" />
                    </p:commandButton>
                </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="#{dndCarsView.onCarDrop}" update="dropArea availableCars" />
    </p:droppable>

    <p:dialog header="Car Detail" widgetVar="carDialog" resizable="false" draggable="false"
              showEffect="fade" hideEffect="fade" modal="true">

        <p:outputPanel id="display">
            <h:panelGrid columns="2" cellpadding="4" rendered="#{not empty dndCarsView.selectedCar}">
                <f:facet name="header">
                    <p:graphicImage name="demo/images/car/#{dndCarsView.selectedCar.brand}.gif"/>
                </f:facet>

                <h:outputText value="Id:" />
                <h:outputText value="#{dndCarsView.selectedCar.id}" style="font-weight:bold"/>

                <h:outputText value="Year:" />
                <h:outputText value="#{dndCarsView.selectedCar.year}" style="font-weight:bold"/>

                <h:outputText value="Brand:" />
                <h:outputText value="#{dndCarsView.selectedCar.brand}" style="font-weight:bold"/>

                <h:outputText value="Color:" />
                <h:outputText value="#{dndCarsView.selectedCar.color}" style="font-weight:bold"/>
            </h:panelGrid>
        </p:outputPanel>
    </p:dialog>
</h:form>