Question

Okay, lets say I am using the sortable function of jQuery UI with the following page:

<script> 
$(function() {
    $( ".sortColumn" ).sortable({
        connectWith: ".sortColumn",
        placeholder: "portlet-placeholder"
    });

    $( ".sortColumn" ).disableSelection();
});
</script> 

<form>
<table>
    <tr>

        <td class="sortColumn" id="left">
            <div class="portlet">
                This is Item 1
                <input type="hidden" name="modules[item1]" value="left">
            </div>
            <div class="portlet">
                This is Item 2
                <input type="hidden" name="modules[item2]" value="left">
            </div>
        </td>

        <td class="sortColumn" id="right">
            <div class="portlet">
                This is Item 3
                <input type="hidden" name="modules[item3]" value="right">
            </div>
            <div class="portlet">
                This is Item 4
                <input type="hidden" name="modules[item4]" value="right">
            </div>
            <div class="portlet">
                This is Item 5
                <input type="hidden" name="modules[item5]" value="right">
            </div>
        </td>

    </tr>
</table>
</form>

You will notice that each portlet has a hidden field that marks the position it is in (either “left” or “right”). As you can see, this is a portlet, so a user can drag and drop items from one column to another, and rearrange their order. As elements positions and orders are changed, I want those hidden fields to be updated to match the change. So if an item is moved from the right column to the left, it’s position field should be changed to left.

How would I do this?

Answer 1

$(function() {
    $( ".sortColumn" ).sortable({
        connectWith: ".sortColumn",
        placeholder: "portlet-placeholder",
        update : function () { 
            $('input.position').each(function() {           
                var parentID = $(this).parent().parent().attr('ID');
                $(this).val( parentID );
            });
        }
    });

    $( ".sortColumn" ).disableSelection();
});

Also add a “position” class to the input fields.

<input class="position" type="hidden" name="modules[item1][position]" value="left">