鼠标拖拽表格table的tr上下移动

小伙伴们肯定在某个项目里遇到要拖拽table表格的tr或者td那么下面就来讲一下，话不多说直接上代码

1，引用插件

<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>

这两个是主要插件百度自行下载去吧，要放在jquery.min.js下面哦

<link rel="stylesheet" href="plugbase/jqueryui/jquery-ui.min.css" />

<script src="plugbase/jqueryui/jquery-ui.min.js"></script>

2，主要html

<tbody id="getRows" class="sortable"></tbody>

在tbody设置class类

3，主要js代码

$(document).ready(function(){
//tr上下拖动
$(".sortable").sortable({  
        cursor: "move",  
        items: "tr",                       //只是tr可以拖动  
        opacity: 1.0,                      //拖动时，透明度为0.6  
        revert: true,                      //释放时，增加动画  
        update: function(event, ui) {      //更新排序之后  
            var categoryids = $(this).sortable("toArray");  
            var $this = $(this);  
        }  
    });  
    $(".sortable").disableSelection(); 

});

4，好了，搞定有木有很惊喜呀！！！赶紧关注lz吧，更多惊喜将会持续更新，满足小伙伴的需求