jQuery 可拖动的可排序输入元素

Question

我使用 jQuery UI 库来拖动和排序元素： http : //jqueryui.com/demos/sortable这工作正常，但我不能拖动输入元素，如 textarea。 这些 textarea 被禁用，因此无需能够在其中写入。 我用谷歌搜索了一下，发现我不是唯一一个遇到这个问题的人。 对此有一些半解决方案，但它们似乎都过时了。 （jQuery 发展很快）。

Answer 1

这应该有效：

HTML：

<div class="sortable-wrapper">
<ul id="sortable-list">
<div class="ui-state-default">
<textarea></textarea>
</div>
</ul>
</div>

jQuery：

$( "#sortable-list" ).sortable();
$( "#sortable-list" ).disableSelection();

Answer 2

如果我能帮助你，你必须为我提供一些代码。

（注意：如果您在抓取 textarea 的同时尝试拖动该项目，您应该实现一些开关来打开/关闭选择。我建议采用不同的方法，您可以随时通过单击内部来编辑 textarea。对于排序，我将使用把手抓住。）

jQuery sortable 适用于列表，即<ul>和<ol>包含<li> 。 像这样的问题通常是由不正确的 html 引起的。

<ul class="my-items">
<li><textarea></textarea></li>
<li><textarea></textarea></li>
<li><textarea></textarea></li>
<li><textarea></textarea></li>
</ul>

jQuery

 $( ".my-items" ).sortable();

如果您想禁用列表项内的文本选择，请在所有文本元素上执行此操作。 不是文本区。 将文本包裹在 p、span、div 中，并仅在这些元素上调用 disableSelection()。

在对脚本进行故障排除之前验证 html 也是一个很好的做法。 我更喜欢http://validator.w3.org/服务。