Making a Multiple Select Control Sortable

Question

Does anyone know how to make a multiple select (see below HTML) sortable? Using either jQuery or Ext JS? By sortable, I mean that I can drag an item (an option) up or down to reposition it in the select control.

<select id="testing" multiple=multiple>
    <option>First Option</option>
    <option>Second Option</option>
    <option>Third Option</option>
    <option>Forth Option</option>
    <option>5 Option</option>
    <option>6 Option</option>
    <option>7 Option</option>
</select>

Answer 1

jQuery UI has functions for making things sortable. See http://jqueryui.com/demos/sortable/.

Answer 2

You can't do it reliably with drag-and-drop. <select multiple> may be implemented using an OS select-list widget, which will not typically generate mouse events like the native HTML elements do.

You'd have to replace the <select> with a load of <div> analogues for it, which do provide sortability in the normal way whichever library/plugin you want to use for it does. It's a fair bit of bother to make an ersatz-<select> nicely accessible/usable/keyboardable though; most plugins don't really manage to fully.

The simpler alternative would be simply to have separate ‘Move up’/‘Move down’ buttons, which find and move the selected <option>​s in the element.