在 jQuery Sortable 父级中的文本区域中使文本可选

Question

我有一个表格，我使用 jQuery UI 的 Sortable 函数对其主体进行了排序。在这个可排序的表格中，我有一个文本区域，允许用户输入有关给定表格条目的 cmets。

<table id="status">
    <thead>
        <tr>
            <th>Name</th>
            <th>Comment</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="dragHandle">Jason</td>
            <td><textarea class="commentBox"></textarea></td>
        </tr>
    </tbody>
</table>

以及使表格可排序的 javascript（我在网上找到了用于使表格可排序的辅助函数）

// Return a helper with preserved width of cells
var fixHelper = function(e, ui) {
    ui.children().each(function() {
        $(this).width($(this).width());
    });

    return ui;
};

$("#status").sortable({
    helper: fixHelper,
    axis: 'y',
    handle: '.dragHandle'
}).disableSelection();

在此文本区域中输入文本可以正常工作，但是当我尝试在文本区域中选择文本时，没有任何反应。即使使用 Shift+箭头键也不会像我预期的那样运行。

如何使 textarea 的文本可选择，同时仍使整个表格可排序？

已经尝试过：

• 当 textarea 获得焦点以尝试暂时允许可选择性时，在表格上执行可排序的“销毁”，但即使在销毁之后，文本选择仍然不稳定。

• 设置 sortable 的 'handle' 属性以仅使 Name 字段可排序

• 将可排序的“禁用”属性设置为从 textareas 启动时禁用

• 在 textarea（或包含 textarea 的 div）中捕获 mousedown/mouseup 事件并调用 event.stopPropagation()

Answer 1

使用 disableSelection 的原因是什么？这就是你的 textArea 没有获得焦点的原因。