Implement Drag Sort in Oracle ADF

Question

I want to implement the drag sort (eg: http://jqueryui.com/sortable/#display-grid) in Oracle ADF.

The below code I have tried in ADF:

<af:panelList rows="6" maxColumns="3" id="sortable1"
                      listStyle="list-style-type:none" >
         <af:forEach varStatus="vs" begin="1" end="17">
          <af:panelList rows="6" maxColumns="3" styleClass="thumbnail" id="test"
                          listStyle="list-style-type:none">
         <af:panelGroupLayout layout="vertical"
                                               styleClass="thumbnail" id="pgl4">
           <af:outputText id="ot2" value="#{vs.index} #{vs.count} #{vs.begin}"/> 
           </af:panelGroupLayout>
            </af:panelList>
          </af:forEach>
</af:panelList>

The below is jquery for sort:

<af:resource type="javascript" source="/js/jquery-1.9.1.js"/>
        <af:resource type="javascript" source="/js/jquery-ui.js"/>
        <trh:script id="sx4">
           $(function () {
              $("#sortable1").sortable();
              $("#sortable1").disableSelection();
          });
        </trh:script>

But I am not able to do the drag sort. How can I implement the drag sort?

Answer 1

I used Panel Dash Board for achieving the requirement of dragsort.

The code I used is below one:

<af:panelDashboard id="pd1">
                          <af:forEach begin="1" end="5" step="1" varStatus="vs"
                                      var="v">
                            <af:panelBox text="#{vs.index}">
                              <af:componentDragSource/>
                              <af:panelGroupLayout layout="vertical"
                                                   styleClass="thumbnail"
                                                   id="pgl10">
                                <af:outputText id="ot8"
                                               value="#{vs.index} #{vs.count} #{vs.begin}"/>
                              </af:panelGroupLayout>
                            </af:panelBox>
                          </af:forEach>
                        </af:panelDashboard>

The component will do the drag sort of the items (panel box). No java script file is required. It will simply do the same thing as drag sort (eg: http://jqueryui.com/sortable/#display-grid) in jQuery.