jquery - 更新 jQuery UI 上的隐藏列表字段可排序？

Question

好吧，假设我在以下页面中使用 jQuery UI 的可排序功能:

<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>

您会注意到每个 portlet 都有一个隐藏字段，用于标记它所在的位置(“左”或“右”)。如您所见，这是一个 portlet，因此用户可以将项目从一列拖放到另一列，并重新排列它们的顺序。随着元素位置和顺序的更改，我希望更新那些隐藏字段以匹配更改。因此，如果一个项目从右栏移到左栏，它的位置字段应该更改为左栏。

我该怎么做？

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();
});

同时向输入字段添加一个“位置”类。

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