使用jQuery和jQuery UI拖动table中的tr元素，改变tr元素的顺序

在使用table制作目录时，会遇到调整目录顺序的问题；

或者在使用table显示数据时，通过改变table中数据的顺序，使得两条不相邻的数据相邻，对比数据信息。

那么，通过什么方法，能够拖动table中tr元素呢？

本文使用jQuery和jquery UI框架中的函数，通过鼠标拖动tr，改变tr的顺序。

    
    
    
    
    



    

        

            

                
序号
                
年份
                
标题
                
作者
            
        
        

            

                
1
                
2011
                
第一行
                
红发---红发
            
            

                
2
                
2012
                
第二行
                
多夫朗明哥
            
            

                
3
                
2013
                
第三行
                
甚平---甚平
            
            

                
4
                
2014
                
第四行
                
鹰眼---鹰眼
            
        
    
    

代码中主要使用两个函数 $("selector").sortable().disableSelection(),helper和stop为sortable函数中的参数。

所有的事件回调函数都有两个参数：event和ui，浏览器自有event对象，和经过封装的ui对象
ui.helper - 表示sortable元素的JQuery对象，通常是当前元素的克隆对象

在任意的 DOM 元素上启用 sortable 功能。通过鼠标点击并拖拽元素到列表中的一个新的位置，其它条目会自动调整。默认情况下，sortable 各个条目共享 draggable 属性。

其他示例请参考http://www.runoob.com/jqueryui/example-sortable.html