jQuery UI Sortable connectWith multiple lists:如何用列表的编号更新表单域？
jQuery UI Sortable connectWith multiple lists:如何用列表的编号更新表单域？
提问于 2013-05-07 09:41:30
我有多个使用sortable和connectWith的列表，但在移动一个项目后，我很难用新的列表/列号更新隐藏的表单域。
代码可以很好地更新当前位置，但我无法让Javascript用于列号。
以下是我到目前为止拥有的代码：
<div id='column1' class='col'>
<div id='contentItem_1'>
ITEM 1
<input class='itemcurrposition' type='hidden' name='item[1][currposition]' value='1' />
<input class='itemcolumnnum' type='hidden' name='item[1][columnnum]' value='1' />
</div>
<div id='contentItem_2'>
ITEM 2
<input class='itemcurrposition' type='hidden' name='item[2][currposition]' value='2' />
<input class='itemcolumnnum' type='hidden' name='item[2][columnnum]' value='1' />
</div>
</div>
<div id='column2' class='col'>
<div id='contentItem_3'>
ITEM 3
<input class='itemcurrposition' type='hidden' name='item[3][currposition]' value='3' />
<input class='itemcolumnnum' type='hidden' name='item[3][columnnum]' value='2' />
</div>
<div id='contentItem_4'>
ITEM 4
<input class='itemcurrposition' type='hidden' name='item[4][currposition]' value='4' />
<input class='itemcolumnnum' type='hidden' name='item[4][columnnum]' value='2' />
</div>
</div>
<div id='column3' class='col'>
<div id='contentItem_5'>
ITEM 5
<input class='itemcurrposition' type='hidden' name='item[5][currposition]' value='5' />
<input class='itemcolumnnum' type='hidden' name='item[5][columnnum]' value='3' />
</div>
<div id='contentItem_6'>
ITEM 6
<input class='itemcurrposition' type='hidden' name='item[6][currposition]' value='6' />
<input class='itemcolumnnum' type='hidden' name='item[6][columnnum]' value='3' />
</div>
</div>$(document).ready (function () {
$('#column1, #column2, #column3').sortable ({
connectWith: '.col',
stop: function () {
var inputs2 = $('input.itemcurrposition');
var nbElems2 = inputs2.length;
$('input.itemcurrposition').each(function(idx) {
$(this).val(nbElems2 - idx);
});
}
})
});谢谢你的帮助。
回答 1
Stack Overflow用户
回答已采纳
发布于 2013-05-08 20:46:52
您可以在"stop“事件处理程序中添加事件和ui参数，使用ui.item检索被拖动的项，然后将其输入值设置为父列的索引。
stop: function (event, ui) {
var inputs2 = $('input.itemcurrposition');
var nbElems2 = inputs2.length;
$('input.itemcurrposition').each(function(idx) {
$(this).val(nbElems2 - idx);
});
var newval = ui.item.closest('.col').index()+1;
ui.item.find("input.itemcolumnnum").val(newval);
}如果列号依赖于列id，而不是它的索引，则可以像这样获得它：
var newval = ui.item.closest('.col').attr('id').replace("column", "");这里的jsfiddle包含了更新的代码
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/16409925
复制相关文章
相似问题
腾讯云开发者
