SharePoint has column ordering feature to set position of columns in list. Using that we can position columns as required – first, second, and so on. This feature can be implemented programmatically as done below.
There can be many ways to implement this, but the one described here is the most efficient and convenient and can be used for many purposes like page ordering, product arrangement in store, etc.
General steps to follow-
1. Dynamically create dropdown having positions as options
2. ‘Focus’ event triggered will save the previous position of item
3. Choose from dropdown the new value to set
4. ‘On Change’ event will be fired and will get new position (this.value)
5. First loop will match the new value in the list and set it to previous one
6. Second loop will update the whole list in dropdown with new positions
Consider an example –
If you need to change the order of pages for particular chapter or book. In a particular book, there are many chapters, and every chapter have various subpages. Now if you need to change their position, from the dropdown having order of all the pages in that chapter, simply select the order where you want to keep the page. At the same time other page will be set to its position same as we do ‘column ordering’ in SharePoint list.
Similarly, for particular chapter and selected parent page there are many subpages, so you can adjust position of subpages from the corresponding order dropdown.
This will help to arrange pages within a particular chapter and main page easily as swapping is done here. For example – if we set page at second position to first position, then page at position one will automatically be set to second position. Below is the code where dropdowns are created dynamically and on the change of one page order, its value is swapped with other page pageorder.
Focus event will get current value of page order and onchange event will change and swap values
Main implementation here is swapping done on the change of position same as SharePoint column ordering and two events triggered every time you change value – ‘focus’ event to get previous value before change and ‘onchange’ event to get new value and perform swapping.
