jqueryでフィールドセットをソートするにはどうすればいいですか？

Question

私は、複数の入力を保持する複数のフィールドセットを持つフォームを持っています。どのように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> 

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>