5

ソート可能な jQuery UI を使用してアイテムのリストを移動し、フォーム フィールド値の位置を更新しようとしています。各項目の非表示の入力値を更新された位置番号で更新する方法がわかりません。すべての「currentposition」値は、移動ごとに変更する必要があります。また、位置番号はたまたまページ上で逆順に表示されます。

<div id='sort-list'>
  <div id='listItem_4'>
    ITEM 4
    <input class='originalposition' type='hidden' name='item[4][origposition]' value='4'>
    <input class='currentposition' type='hidden' name='item[4][currposition]' value='4'>
  </div>
  <div id='listItem_3'>
    ITEM 3
    <input class='originalposition' type='hidden' name='item[3][origposition]' value='3'>
    <input class='currentposition' type='hidden' name='item[3][currposition]' value='3'>
  </div>
  <div id='listItem_2'>
    ITEM 2
    <input class='originalposition' type='hidden' name='item[2][origposition]' value='2'>
    <input class='currentposition' type='hidden' name='item[2][currposition]' value='2'>
  </div>
  <div id='listItem_1'>
    ITEM 1
    <input class='originalposition' type='hidden' name='item[1][origposition]' value='1'>
    <input class='currentposition' type='hidden' name='item[1][currposition]' value='1'>
  </div>
</div>

item[#][currposition] 値は、すべてのアイテムの新しく更新された位置番号に変更する必要があります。各項目の位置の値を更新し、フォームが送信されたときに正しい値にする必要があります。そして、位置は送信時に元の値と比較されます。

私がこれまでに得た最も近いものは次のようなものです:

$(function() {
    $( '#sort-list' ).sortable({
        update : function () { 
            var result = $('#sort-list').sortable('toArray');
            $('input.positioncurrent').each(function() {           

            });
        }
    });
});

助けてくれてありがとう。

4

2 に答える 2

16

イベントを使用してstop、並べ替えが終了したときに位置を更新する必要があります。

私がしたことは、並べ替えが終了したときに、更新する入力とその番号のリストを取得し、それぞれに対して新しい位置を更新することです。each()メソッドは、リスト内の要素の現在のインデックスを引数として提供します。

$(function() {
    $( '#sort-list' ).sortable({
        stop: function () {
            var nbElems = inputs.length;
            $('input.currentposition').each(function(idx) {
                $(this).val(nbElems - idx);
            });
        }
    });
});

ワーキングjsfiddle

于 2013-02-06T19:05:54.140 に答える