ADF component to display a grid with wrap around

Question

We need to create a grid of images on a page, such that maximum number of images that can fit in the viewable area are displayed in a row. The remaining images wrap to the next row. One should be able to select one or more images from the grid and drag-and-drop them in the same grid or outside the grid. Any suggestions about the best ADF component that can serve this purpose. Also, wonder if Collection drag-and-drop mechanism is available for components other than <table> and <tree>?. For example, can we use it with <panelList> or <panelForm>?

Answer 1

this related to css instead of which component to use, following code should work:
<af:panelGroupLayout id="pgl1" layout="vertical" inlineStyle="width:90%; border:1px solid black;float:left">
     <af:image source="#{resource['images:logo.png']}" shortDesc="Img 1" id="i1"
inlineStyle="height:60px;float:left"/>
<af:image source="#{resource['images:logo.png']}" shortDesc="Img 2" id="i2"
inlineStyle="height:60px;float:left"/>
</af:panelGroupLayout>
if you remove af:panelGroupLayout and just use following inside your component
<af:image source="#{resource['images:logo.png']}" shortDesc="Img 1" id="i1"
inlineStyle="height:60px;float:left"/>
<af:image source="#{resource['images:logo.png']}" shortDesc="Img 2" id="i2"
inlineStyle="height:60px;float:left"/>
it should still work