如何通过 jquery 对字段集进行排序？答案

【问题标题】：How can i sort fieldsets via jquery?如何通过 jquery 对字段集进行排序？
【发布时间】：2012-04-10 10:53:24
【问题描述】：

我有一个包含多个字段集的表单，其中包含多个输入。如何通过 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>

【问题讨论】：

标签： jquery draggable twitter-bootstrap

【解决方案1】：

$(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>

【讨论】：