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

Posted 2023-05-09

【中文标题】我可以使输入表单可排序吗？

【英文标题】：Can I make an input form sortable?

【发布时间】：2014-09-14 20:04:54

【问题描述】：

我可以使用 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>

【问题讨论】：

我认为你是对的；似乎不可能使输入字段（具有 type="text"）可排序。就像你说的，如果你使用 div 代替它工作正常。我在其他地方找到了一个答案：wpquestions.com/question/showChrono/id/2189

【参考方案1】：

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

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

你应该很好。

【参考方案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();
);

【讨论】：

你可以删除它！它不会妨碍可排序的功能。如果确实有帮助，请考虑接受答案！

【参考方案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>

【讨论】：

很高兴知道它可以用一张桌子来完成。正如我在问题中所说，如果我将每个输入放在 div 或 li 中，我可以使表单可排序。使用表格而不是 li 或 div 这样做有什么好处吗？

我检查了 div 和 li 元素默认显示样式之间的差异，现在看来，您是否选择使用具有块样式的 div 和具有列表项样式的 li 现在会有所不同：w3schools.com/cs-s-ref/…