jquery sortable multiple select

Question

I have an ul list and a multipe selectbox, i would like to know how can i use sortable to sort option's as li element (i have to start/stop position of sortable) using Jquery UI.

Example (my jsfiddle) :

<select id="myselect" multiple>
 <option value="vA">A</option>
 <option value="vB">B</option>
 <option value="vC">C</option>
 <option value="vD">D</option>
</select>

<ul class="myul">
 <li>AnElementP1</li>
 <li>AnElementP2</li>
 <li>AnElementP3</li>
 <li>AnElementP4</li>
</ul>

Javascript

$(document).ready(function () {

 $(".myul").sortable({ 
        start: function(event, ui) {
            ui.item.startPosition = ui.item.index();

        },
        stop: function(event, ui) {
            console.log("Start position: " + ui.item.startPosition);
                    console.log("New position: " + ui.item.index());
                        // How can i sort the select box option's
        }
    });

});

Answer 1

Get it !

Maybe this can help someone.

Link to Jsfiddle

$(document).ready(function () {

 $(".myul").sortable({ 
        start: function(event, ui) {
            ui.item.startPosition = ui.item.index();
        },
        stop: function(event, ui) {
            var El = $("#myselect option").eq(ui.item.startPosition);
            var cpy = El.clone();
            if (El.is(':selected'))
            {
              cpy.attr("selected","selected");
            }
            El.remove();
            if (ui.item.index() === 0)
                $("#myselect").prepend(cpy);
            else
                $("#myselect option").eq(ui.item.index() -1).after(cpy);

        }
    });
});

EDIT

.clone() doesn't clone selected value (See ticket), that's why i've add a condition.

if (El.is(':selected'))
{
  cpy.attr("selected","selected");
}

Answer 2

It looks like you've solved it already yourself :) Was trying out a variant without cloning myself, will post it here as an alternative:

$(document).ready(function () {

 $(".myul").sortable({ 
        start: function(event, ui) {
            ui.item.startPos = ui.item.index();

        },
        stop: function(event, ui) {
          var newPos = ui.item.index();
          var startPos =ui.item.startPos;
          if(newPos < startPos)newPos--;
          var dropdown =  $("#myselect")[0];          
          var tomove =  $(dropdown.options[startPos]);       
          if(newPos===-1)
            $(dropdown.options[0]).before(tomove);
          else
            $(dropdown.options[newPos]).after(tomove);

        }
    });

});