HTML table鼠标拖拽排序功能
效果图:1.引入文件
<script src="js/jquery-1.10.1.min.js"></script>
<link rel="stylesheet" href="Public/css/jquery-ui.min.css">
<script src="js/jquery-ui.min.js"></script>2.给元素附上sortable类
<tbody class="sortable">
<tr></tr>
<tr></tr>
</tbody>3.开启并配置
$(function() {
$(".sortable").sortable({
cursor: "move",
items: "tr", //只是tr可以拖动
opacity: 0.6, //拖动时,透明度为0.6
revert: true, //释放时,增加动画
update: function(event, ui) { //更新排序之后
var categoryids = $(this).sortable("toArray");
var $this = $(this);
}
});
$(".sortable").disableSelection();
});以上所述是小编给大家介绍的HTML table鼠标拖拽排序功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对CodeAE代码之家网站的支持!
https://www.uoften.com/webdesign/xhtml/20180414/68916.html
页:
[1]