To answer the question in the subject of your post: I don’t think Select2 is a good option for your use case, for the following reasons:
- As you noted, there is no built-in reordering feature (especially drag-and-drop). There is also no official documentation on how to write Adapters and Decorators for Select2 (nor have I found many third-party online tutorials). You will essentially be on your own to figure out how to do it.
- To implement that feature you’d need the dropdown to stay open; Select2 doesn’t typically behave that way, although you can force it to.
- To be usable, all of the options (column headings) would need to be visible at one time. This implies either that you only have a few options, or that you expect the dropdown to be quite long.
- Select2’s main differentiator from a standard HTML
<select> element is the search/filter feature. It’s not clear how this feature would be useful in your use case.
I would recommend creating your own drag-and-drop list UI. There are plenty of online tutorials for doing that. You could store the final selections and order in a hidden form field, or directly POST the selections/order to an endpoint on your server via
xhr(). If you need to show/hide the list, the HTML
<details> element provides native show/hide capability, or you could instrument it yourself with a
button that shows/hides a
<section>) containing your list UI.