如何向表中添加拖动图标以使其可以使用jQuery UI进行排序？

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>

是否有人知道如何制作它所以我可以使用向上/向下箭头作为拖动手柄进行排序？希望使用jQuery UI图标。

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