DragDrop - DataTable

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

Available Cars
IdYearBrandColor
46c1d0321980JaguarBlue
a3c38f541971HondaGreen
1316c7ab2001BMWMaroon
85ef95fe2006JaguarBlue
1a891b592004BMWWhite
086a33541999RenaultBlack
2006a6191961VolkswagenGreen
7b18986b1985FordSilver
64915bff2000FordWhite
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>