jQuery UI Sortable connectWith 多个列表：如何用列表的数量更新表单字段？

Question

我有多个使用 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);
      });
    }
    })
});

感谢您的帮助。

Answer 1

您可以在“停止”事件处理程序中添加事件和 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 更新代码