jquery实现table表格的拖拽排序

        function addEvent(el,list){  // 参数说明：（table对象，数据列表）
            $(el).find('tbody>tr').each(function(i, ele){

                $(ele).off("dragstart dragover dragleave drop");

                $(ele).on('dragstart', function(event){
                    let evt = event.originalEvent;
                    evt.dataTransfer.setData('Text', i);
                    evt.dataTransfer.effectAllowed = 'move';
                })
                .on( 'dragover', function(event){
                    console.log('dragover');
                    event.preventDefault();  
                    let targetRect = event.currentTarget.getBoundingClientRect();
                    let clientY = event.originalEvent.clientY;
                    let clientYt = targetRect.height/2+targetRect.top;
                    let $ele = $(event.currentTarget);
                    if(clientY<clientYt){
                        $ele.removeClass('up');
                        $ele.addClass('down');
                    } else {
                        $ele.addClass('up');
                        $ele.removeClass('down');
                    }
                })
                .on( 'drop', function(event){
                    let index1 = +event.originalEvent.dataTransfer.getData('Text');
                    let index2 = i;
                    event.target.parentNode.classList.remove('over');
                    event.target.parentNode.classList.remove('up');
                    event.target.parentNode.classList.remove('down');
                    if(index1!=index2){
                        let targetRect = event.currentTarget.getBoundingClientRect();
                        let clientY = event.originalEvent.clientY;
                        let middle = targetRect.height/2+targetRect.top;
                        if(clientY<middle){
                            list.splice(index2, 0, list[index1]);
                            list.splice(index1+(index1-index2>0?1:0), 1);
                        } else {
                            list.splice(index2+1 , 0, list[index1]);
                            list.splice(index1+(index1-index2>0?1:0) , 1);
                        }
                    }

                })
                .on( 'dragleave', function(event){
                    event.target.parentNode.classList.remove('over');
                    event.target.parentNode.classList.remove('up');
                    event.target.parentNode.classList.remove('down');
                });
            });
        },

css样式：（scss的写法）

table {
    width: 100%;
    border-collapse:collapse;
     border: 1px solid #DDD;
    tr {

        td,th {
            height: 40px;
            border: 1px #DDD solid;
            text-align: center;
        }
    }

    tr[draggable="true"]{
        cursor: move;
        transition: all .3s;
        &.up{
            background-color: #f9ead5!important;
            transform: translateY(-50%);
        }
        &.down{
            background-color: #f9ead5!important;
            transform: translateY(50%);
        }
    }
    
    thead {
        background-color: #DDD;
    }
}

注意一点，可以拖拽的tr需要设置,draggable="true"