Question

Any tips on making the following option elements draggable?

<select id="expenseSelect" multiple="multiple" style="height:200px">
    <option value="a">aaaaaaaa</option>
    <option value="b">bbbbbbbb</option>
    <option value="c">cccccccc</option>
    <option value="d">dddddddd</option>
    <option value="e">eeeeeeee</option>
</select>

The following doesn’t seem to work

$(document).ready(function() {
    $('#expenseSelect').children().draggable();
});

I’m basically looking for a listbox element where the user can choose 1 or more items and drag them to a form.

Answer 1

I’m afraid this isn’t possible with the native drop-down boxes. Different browsers may create a select tags in different ways. For example, mobile devices are likely to do something completely different with select tags.

You should perhaps look at using a jQuery plugin (or creating your own) which makes a drop down box using div or li tags instead. These could then be draggable.