Create jQuery sortable list in grails

Question

I want to create a sortable list using Jquery in grails. This list has to be populated by a dropdown. Here is the flow:

(1) User selects item1 from dropdown , item1 shows up in sortable list

(2) User selects item3 from dropdown , item 3 shows up in sortable list

(3) User selects item5 from dropdown , item5 shows up in sortable list

Then the user can rearrange the sortable list in what ever way he wants and save it in a list. It has to be a list because the sequence is important to maintain. Currently, there is a multi select to select multiple items but there is no way to keep them in order.

I have Jquery plugin installed in my project. I am not sure how to get the selected item from the dropdown. There is a many-many relation ship between these classes.

<div class="fieldcontain ${hasErrors(bean: CarInstance, field: 'parts', 'error')} ">
<label for="parts">
    <g:message code="label" default="Car Parts" />
</label>
<g:select name="parts"
          from="${Parts.list()}"
          multiple="multiple"
          optionKey="id"
          size="5"
          optionValue="partName"
          class="many-to-many"/>

Any advise would be helpful. Thanks..

Answer 1

Generally, I suggest you to separate HTML markup from client side logic and write all the logic in a separate javascript file. For instance, your javascript code might look like this:

(function ($) {
    $('select').on('change', function () {
        var value = $(this).val();
        var text = $(this).find('option:selected').text();
        $('<div class="item" data-value="' + value + '">' + text + '</div>')
            .appendTo('#sortable');
    });
})(jQuery);

Have a look at a sample jsFiddle: http://jsfiddle.net/rsPW7/1/