Question

Is it possible with jQuery/jQuery UI to make the options nodes of a select node sortable?

It would allow the user to drag the options in the order they would like.

For example:

<select id="foo">
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>

You would be able to order them either 1, 2, 3 or 1, 3, 2 or 2, 3, 1 etc.

Answer 1

Works in Firefox anyway. Probably just needs some tweaking.

var options = null;
var targetOption = null;
jQuery(function()
{
    options = jQuery("#foo").find("OPTION");
    options.each(function()
    {
        jQuery(this).bind("mousedown", function(event)
        {
            targetOption = jQuery(event.target);
        });
        jQuery(this).bind("mouseup", function(event)
        {
            var target = jQuery(event.target);
            if(target.is(options))
            {
                targetOption.insertAfter(target);
            }
        });
    });
});