Question

I have a form with multiple fieldsets holding multiple inputs. How is it possible to sort this fieldsets via jquery and drag&drop?

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

Answer 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>