0

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

谢谢您的帮助。

4

1 回答 1

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

于 2013-05-08T12:46:51.567 回答