jQueryUI 可排序 - 在“项目”中可能是复杂的选择器

Question

我在使用 jQueryUI 的可排序功能时遇到了问题：

    <div class="sortable">
        <div class="ui-state-default">
            <h4></h4>
            <input type="text" />
            <button></button>
        </div>
        ...more <div>
    </div>

我的目标是不能对整个 div 进行排序，而只能对输入元素进行排序。这可能吗？

我已经尝试了几件事，但没有任何效果......

$(".sortable").sortable({ items: "> input" });
$(".sortable").sortable({ items: "> input[type=text]" });
$(".sortable").sortable({ items: "> div > input" });
$(".sortable").sortable("option", 'items', 'div > input');

我已经用谷歌搜索了一个解决方案，但除了这个 similar question 之外什么都没找到，但我认为 .cancel() 函数对我来说不是一个解决方案。

有什么帮助吗？

Answer 1

您遇到的问题是输入框本身不能做成可拖动的句柄。您需要将输入包装在 span 或 div 中，并在 { items: } 标记中使用它。输入框本身还是拿不出来的，所以强烈建议在div里面用一个handle来拖拽，让操作更直观。

或者，您可以在输入顶部添加一个带有 { position: absolute; width: 100%; height:100% } 的隐藏 div 作为句柄，但这会使您的输入不可编辑，因为点击会点击该 div 而不是您的输入。