Update Hidden List Field on jQuery UI Sortable?
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>
</t开发者_StackOverflow社区d>
<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?
$(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">
精彩评论