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”，如果你开始匹配选择器的元素，则会阻止排序。

#placement-bottom {
display:none !important;
visibility:hidden !important;
}

你应该做得好。

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类型=＆＃34; text＆＃34;用于处理排序的字段。 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>

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

3 个答案: