js实现table行上下移动，并实现数据的排序

对页面的table表格进行上下移动排序，移动操作不写入数据库，最后对操作统一保存。下面是详细代码：
html代码：

<table class="layui-table layui-table-min">
    <tbody>
        <tr>
        <th width="100">编号</th>
        <th width="100">类型</th>
        <th>名称</th>
        <th width="150">课时时长</th>
        <th width="150">操作</th>
        </tr>
        <tr class="queue">
        <td>1001</td>
        <td>视频</td>
        <td style="text-align:left;">回顾三先天曾合招过的战役，曾多次拯救苦境</td>
        <td>5小时12分钟36秒</td>
        <td>
            <div class="layui-btn-group">
            <span class="layui-btn layui-btn-xs question-up">上移</span>
            <span class="layui-btn layui-btn-normal layui-btn-xs question-down">下移</span>
            <span class="layui-btn layui-btn-xs layui-btn-danger question-del" data-mid="1001">删除</span>
            </div>
        </td>
        </tr>
        <tr class="queue">
        <td>1002</td>
        <td>Word</td>
        <td style="text-align:left;">霹雳2021年强档大作《碧血玄黄》登场人物介绍</td>
        <td>4小时36分钟56秒</td>
        <td>
        <div class="layui-btn-group">
        <span class="layui-btn layui-btn-xs question-up">上移</span>
        <span class="layui-btn layui-btn-normal layui-btn-xs question-down">下移</span>
        <span class="layui-btn layui-btn-xs layui-btn-danger question-del" data-mid="1002">删除</span>
        </div>
        </td>
        </tr>
        <tr class="queue">
        <td>1000</td>
        <td>PDF</td>
        <td style="text-align:left;">意琦行，倦收天双双黑化，正道战力堪忧</td>
        <td>6小时59分钟59秒</td>
        <td>
        <div class="layui-btn-group">
        <span class="layui-btn layui-btn-xs question-up">上移</span>
        <span class="layui-btn layui-btn-normal layui-btn-xs question-down">下移</span>
        <span class="layui-btn layui-btn-xs layui-btn-danger question-del" data-mid="1000">删除</span>
        </div>
        </td>
        </tr>
    </tbody>
</table>

javascript代码：

$('#questionDiv').on('click','.question-del',function(){
    let qBox = $(this).parents('.question-item');
    $(this).parents('tr').remove();
    set_mids(qBox)
})

$('#questionDiv').on('click','.question-up',function(e){
    let obj = $(e.target).closest('tr');
    let qBox = $(this).parents('.question-item');
    tr_pre($(obj[0]),qBox);
})

$('#questionDiv').on('click','.question-down',function(e){
    var obj = $(e.target).closest('tr');
    let qBox = $(this).parents('.question-item');
    tr_next($(obj[0]),qBox);
})

function set_mids(qBox){
    let items = qBox.find('.question-del');
    let ids = [];
    if(items.length>0){
        items.each(function(index,item){
        ids.push($(item).data('mid'));
    })
    }else{
        qBox.find('table').append('<tr class="question-none"><td colspan="5">请选择章节内容</td></tr>');
    }
    qBox.find('[name="mids[]"]').val(ids.join(','));
}

function tr_pre(o,qBox) {
    var pres = o.prevAll('tr.queue');
    if (pres.length > 0) {
        var tmp = o.clone(true);
        var oo = pres[0];
        o.remove();
        $(oo).before(tmp);
        set_mids(qBox);
    }
    else{
        layer.msg('已经第一个了');
    }
}

function tr_next(o,qBox) {
    var nexts = o.nextAll('tr.queue');
    if (nexts.length > 0) {
        var tmp = o.clone(true);
        var oo = nexts[0];
        o.remove();
        $(oo).after(tmp);
        set_mids(qBox);
    }else{
        layer.msg('已经最后一个了');
    }
}