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", "");

here更新されたコードを含むjsfiddle

于 2013-05-08T12:46:51.567 に答える