我可以使输入表单可排序吗？

Question

我可以使用 jQuery UI 使 ul 可排序。我可以对一组 div 做同样的事情。这意味着每个项目都可以移动和改变位置。
1-似乎不可能对表格进行排序，对吗？ 2- 我尝试的一种解决方案是将每个表单输入放在一个 li 或一个 div 中。但是，这是最好的方法吗？

JQUERY：

$(function() {
    $('#sortable').sortable();  
});

HTML：

<ul id="sortable">
    <li id="1">item1</li>
    <li id="2">item2</li>
    <li id="3">item3</li>
</ul>

<form id="sortable" action="extern.php" method="post">
<input type="text" id="item1" name="item1" value=""  ><br>
<input type="text" id="item2" name="item2" value=""  ><br>
<input type="text" id="item3" name="item3" value=""  ><br>
</form>

Answer 1

Sortable() 有一个名为 cancel 的选项，默认为：“input, textarea, button, select, option”，如果您从匹配选择器的元素开始，则会阻止排序。

$("#sortableList").sortable({ cancel: null });

你应该很好。

Answer 2

您应该将text inputs 和对应的labels 包装成li。

DEMO

HTML：

    <h3>Sortable form elements</h3>
<form id="" action="extern.php" method="post">
<ul id="sortable">
<li class="ui-state-default">
    Fname : <input type="text" id="fname" name="fname" value=""  >
</li>
<li class="ui-state-default">
    Lname : <input type="text" id="lname" name="lname" value=""  >
</li>
<li class="ui-state-default">
    Email : <input type="text" id="email" name="email" value=""  >
</li>    
</ul>
    </form>

JS代码：

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

Answer 3

当我在表单中使用 TABLE、TR 和 TD 元素时，我能够添加排序行为。但是，我需要添加 LABEL 来处理排序，因为我无法使用纯 INPUT type="text" 字段来处理排序。 JSFiddle

$(function () {
    $('form').sortable({
        items: ".sort"
    });
});

HTML

<form id="sortable" action="extern.php" method="post">
    <table>
        <tr class="sort">
            <td>
                <label>1</label>
            </td>
            <td>
                <input type="text" id="Text1" name="item1" value="">
            </td>
        </tr>
        <tr class="sort">
            <td>
                <label>2</label>
            </td>
            <td>
                <input type="text" id="Text2" name="item2" value="">
            </td>
        </tr>
        <tr class="sort">
            <td>
                <label>3</label>
            </td>
            <td>
                <input type="text" id="Text3" name="item3" value="">
            </td>
        </tr>
    </table>
</form>