如何将拖动图标添加到表中，使其可以使用jQueryUI进行排序

Question

我使用以下内容对表中的行进行排序。

$('#grid tbody').sortable({      
        helper: function (e, ui) {  
            ui.children().each(function () {  
                $(this).width($(this).width());  
            });  
            return ui;  
        },  
        scroll: true,  
        stop: function (event, ui) {  
            //                   
        }  
    }).disableSelection();

但现在的问题是，我无法更改表格。下面是一个例子。

请注意，这只是一个示例。我的真实表有输入字段，因此用户可以输入输入数据。这就是我不能只使用disableSelection的原因。

<table id="grid" >
    <tbody>
        <tr><td>A</td><td>1</td></tr>
        <tr><td>B</td><td>2</td></tr>
        <tr><td>C</td><td>3</td></tr>
        <tr><td>D</td><td>4</td></tr>
        <tr><td>E</td><td>5</td></tr>
    </tbody>
</table>

有人知道我该怎么做吗？这样就会出现一个向上/向下箭头，让我用作排序的拖动手柄？希望使用jQueryUI图标。

Answer 1

试试这个

$('#grid tbody').sortable({      
        helper: function (e, ui) {  
            ui.children().each(function () {  
                $(this).width($(this).width());  
            });  
            return ui;  
        },  
        scroll: true,  
        handle : '.handle',
        stop: function (event, ui) {  
            //                   
        }  
    }).disableSelection();