Make text in textbox inside jQuery sortable parent

Question

I have a table whose body I made sortable using the JQuery UI Sortable sort function. In this sortable table, I have a text box that allows the user to enter comments on this record in the table.

<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>

And javascript to make the table sortable (with a helper function for sorting the tables I found on the Internet)

// 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();

Typing text into this text box works fine, however, when I try to select text in the text box, nothing happens. Even using Shift + Arrow Keys does not behave as I expected.

How to make textarea text selected while maintaining the entire sort table?

Already undertaken:

• "" , , , - .

• 'handle' Name sortable

• disable

• mousedown/mouseup ( div, ) event.stopPropagation()

Answer 1

disableSelection? textArea .