Drag and Drop between 2 multiple select

Question

I'm having a problem using jQuery UI to drag and drop some items from one multiple select to another (an empty one).

This is the code for the multiple selects and the js function:

<div class="availableContainer">
    <span style="font-weight: bold">Available items</span>
    <select name="@sort1" id="@sort1" multiple="multiple" class="connectedSortable">
        @for (var i = 0; i < ViewBag.Fields.Count; i++)
        {
            <option value="@ViewBag.Fields[i].Name">@ViewBag.Fields[i].Name</option>
        }
    </select>
</div>
<div class="selectedContainer">
    <span style="font-weight: bold">Selected items</span>
    <select name="@sort2" id="@sort2" multiple="multiple" class="connectedSortable">            
    </select>
</div>

<script type="text/javascript">
$(document).ready(function() {
    $("#@sort1, #@sort2").sortable({
        connectWith: ".connectedSortable",
    }).disableSelection();
});

I've tried using this with <ul> and <li> and it works fine, but with a multiple select it does nothing. And I really need it to work with the multiple select. Any tips on what I'm doing wrong will be nice.

As a side note, this piece of code is in a razor partial view.

Answer 1

I don't think select-option element support jQuery UI sortable, draggable and droppable.

You can move to a jQuery plugin like multiselect.