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

还在输入字段中添加“position”类。

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

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

1 个答案: