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与更新的代码