1. 程式人生 > >滑鼠拖拽表格table的tr上下移動

滑鼠拖拽表格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吧,更多驚喜將會持續更新,滿足小夥伴的需求