Question

I have a page with two lists. The list on the left has some “optional” items. The list on the right is the main list that will be pre-populated with required items.

The user should be able to drag optional items back and forth between the two lists as well as to sort them in either list.

The users should be able to sort the main list items (both required and optional), but should not be able to drag a required item to the optional list.

Does this make sense?
What’s the best way to achieve this?

I’ve tried different ways of doing this with the jquery sortable, but can’t seem to get it right.
Any help is much appreciated.

An example list:

<div id="Selector">
<ul id="OptionalFields" class='droptrue'>
    <li class="ui-state-highlight, optional">Optional 1</li>
    <li class="ui-state-highlight, optional">Optional 2</li>
    <li class="ui-state-highlight, optional">Optional 3</li>
    <li class="ui-state-highlight, optional">Optional 4</li>
</ul>
<ul id="FileFields" class='droptrue'>
    <li class="ui-state-default, required">Required 1</li>
    <li class="ui-state-default, required">Required 2</li>
    <li class="ui-state-default, required">Required 3</li>
</ul>

Currently, my script looks like this:

$(function () {
    $("#OptionalFields").sortable({
        containment: '#Selector',
        tolerance: 'pointer',
        connectWith: '#FileFields',
        cursor: 'pointer',
        revert: 'true',
        opacity: 0.6,
        receive: function () {
            if ($(this).hasClass("required")){ return false};
        }

    });

    $("#FileFields").sortable({
        containment: '#Selector',
        tolerance: 'pointer',
        connectWith: '#OptionalFields',
        cursor: 'pointer',
        revert: 'true',
        opacity: 0.6,
        update: function () {
            //alert('sorted');
        }
    });
});

Thanks,
Tony

edited a type/syntax error.

Answer 1

Ok, found a solution:

 $(function () {
    $("#OptionalFields").sortable({
        containment: '#Selector',
        tolerance: 'pointer',
        connectWith: '#FileFields',
        cursor: 'pointer',
        revert: 'true',
        opacity: 0.6,
        receive: function (event, ui) {
            if (ui.item.hasClass('required')) {
                $(ui.sender).sortable('cancel'); 
            };
        }

    });

    $("#FileFields").sortable({
        containment: '#Selector',
        tolerance: 'pointer',
        connectWith: '#OptionalFields',
        cursor: 'pointer',
        revert: 'true',
        opacity: 0.6,
        update: function () {
            //alert('sorted');
        }
    });

Notice the changes to the receive event and the change to how I cancel.
This will cancel the drop.
Now to make it pretty. =)

I also fixed the classes specified for the list items by removing the commas.