Re-ordering the included components

Hi Team,

I have a requirement where we include a component inside other component. If you see the code below , we have a list of components included dynamically. Now the  use-case is that author should be able  to re-order the included component's. i know we can re-order the components that can be dragged and droped, but not sure how to re-order the included components. Is there any way to do it?

<div data-sly-list.keyName="${model.articleList}">

    <p>${keyName}</p>

        <div data-sly-list.key="${model.articleList[keyName]}">

            <div class= "article_${keyList.count}" data-sly-resource="${@path=key.name, resourceType='/apps/test-proj/components/modular/content/articeInfo'}">/div>

       </div>

</div>

Thanks.