如何通过jquery对字段集进行排序?

时间:2012-04-10 10:53:24

标签: jquery draggable twitter-bootstrap

我有一个包含多个输入的多个字段集的表单。如何通过jquery对这个字段集进行排序并拖放?

  <fieldset>
    <legend>Fieldset1
      <span class="pull-right">
        <a href="#"><i class="icon-move"></i></a>
      </span>
    </legend>

    <label for="f1_i1">Field1-Input1</label>
    <input id="f1_i1" name="f1_i1" size="50" type="text"/>

    <label for="f1_i...">Field1-Input...</label>
    <input id="f1_i..." name="f1_i..." size="50" type="text"/>

  </fieldset>

  <fieldset>
    <legend>Fieldset2
      <span class="pull-right">
        <a href="#"><i class="icon-move"></i></a>
      </span>
    </legend>

    <label for="f2_i1">Field2-Input1</label>
    <input id="f2_i1" name="f2_i1" size="50" type="text"/>

    <label for="f2_i...">Field2-Input...</label>
    <input id="f2_i..." name="f2_i..." size="50" type="text"/>

  </fieldset>

  <fieldset>
    <legend>Fieldset
    ...
  </fieldset>

1 个答案:

答案 0 :(得分:0)

$(function() {
        $( "#sortable" ).sortable();
        $( "#sortable" ).disableSelection();
    });

<ul id="sortable">
      <li>
          fieldset>
    <legend>Fieldset1
      <span class="pull-right">
        <a href="#"><i class="icon-move"></i></a>
      </span>
    </legend>

    <label for="f1_i1">Field1-Input1</label>
    <input id="f1_i1" name="f1_i1" size="50" type="text"/>

    <label for="f1_i...">Field1-Input...</label>
    <input id="f1_i..." name="f1_i..." size="50" type="text"/>

  </fieldset>
    </li>
..
.
..
</ul>