DragDrop - DataTable DragDrop components have special integration with data components. Drag the cars using the drag icon to the drop area.
Available Cars
IdYearBrandColor
07c5ad1b1995VolvoYellow
85f2c8e71986VolvoWhite
ba429ba72002JaguarSilver
19d056661996FiatYellow
814f083a1994VolvoBlue
ab357e792000BMWGreen
b99af0721982BMWOrange
168cb13d2009MercedesRed
6058405a1970MercedesMaroon
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 ui-icon-arrow-4" />
                <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="ui-icon-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>
                
PrimeTek, Copyright © 2015
All rights reserved.
Running PrimeFaces-6.1-SNAPSHOT on Mojarra-2.2.8.