jQueryUI可排序-在'项目'

jQueryUI sortable - are complex Selectors possible in 'items'

本文关键字：项目 排序 jQueryUI      更新时间：2023-09-26

我在使用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');

我已经在谷歌上搜索了一个解决方案，但除了这个类似的问题外，什么也没找到，但我认为.cancel（）函数对我来说不是一个解决办法。

有什么帮助吗？

您遇到的问题是输入框本身不能作为可拖动的句柄。您需要将输入封装在span或div中，并在{ items: }标记中使用它。您仍然无法拾取输入框本身，因此我强烈建议您在div中使用一个用于拖动的句柄，以使操作更加直观。

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

相关文章：