小伙伴们肯定在某个项目里遇到要拖拽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吧,更多惊喜将会持续更新,满足小伙伴的需求