The following code snippet is a quick and easy way to selectively create a list from options in a secondary multiselect box. As it's multiselect you'll be able to move more than one option to the other list at the same time. Note this example doesn't include sorting the order, for this you might want to look at using something like JQuery sortables.
The following code will consist of two multiselects and an add and remove button to switch between the two lists. If both lists are equally important (e.g. sorting teams) you could just change these to arrows.
First create the options multiselect:
<select id="options" multiple="multiple">
<input onclick="moveOption('options','selected')" type="button" value="add">
<input onclick="moveOption('selected','options')" type="button" value="remove">
...and now add the other multiselect box (with a bit of styling you could line these up side by side).
<select id="selected" multiple="multiple"></select>
This example is built in Jquery, though could easily be adapted. So to implement this example include Jquery with this script in the head of your document:
function moveOption(from, to)
$("#" + from + " :selected").each(function ()
$('#' + to).append('<option value="' + $(this).val() + '">' + $(this).text() + '</option>');
$('#' + from + ' option[value="' + $(this).val() + '"]').remove();
In the example below I've wrapped a division around the select boxes and buttons and floated each division left, this is an easy way to line everything up.