DragDrop - DataTable

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

Available Cars
IdYearBrandColor
3b05035b1965JaguarSilver
a520df351982FiatBrown
ff4969681977HondaWhite
7228d1171967AudiOrange
e31903081996MercedesOrange
b6c9a9ce1968VolkswagenGreen
867b13981964FordYellow
da2b588a1978HondaRed
a179caab1989BMWYellow
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>