如下代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 排序（Sortable） - 默认功能</title>
<link rel="stylesheet" href="../csscool/css/jquery-ui.min.css">
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../csscool/js/jquery.min.js"></script>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../csscool/js/jquery-ui.min.js"></script>
<style>
#sortable1 { list-style-type: none; margin: 0; padding: 0; width: 40%;float: left; }
#sortable1 li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
#sortable1 li span { position: absolute; margin-left: -1.3em; }
#sortable2 { list-style-type: none; margin: 0; padding: 0; width: 40%; float: left; }
#sortable2 li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
#sortable2 li span { position: absolute; margin-left: -1.3em; }
#tablesort{width: 500px;}
#tablesort tr{background: #ccc;}
#tablesort td{width: 20%;}
</style>
<script>
$(function() {
$( "#sortable tbody" ).sortable();
$( "#sortable tbody" ).disableSelection();
$( "#sortable1" ).sortable();
$( "#sortable1" ).disableSelection();
$( "#sortable2" ).sortable();
$( "#sortable2" ).disableSelection();
});
</script>
</head>
<body>
<form action="">
<ul id="sortable1">
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
</ul>
<ul id="sortable2">
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
</ul>
<div id="tablesort">
<table class="table table-striped table-bordered table-hover" id="sortable">
<thead>
<tr>
<th >序号</th>
<th >名称</th>
<th >类型代码</th>
<th >含义</th>
<th >是否显示</th>
<th >操作</th>
</tr>
</thead>
<tbody>
<tr class="item" aid="1" id="1" sort="1"> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>显示</td> <td><button class="btn btn-primary edit" tid="1">修改</button></td> </tr>
<tr class="item" aid="2" id="2" sort="2">
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>显示</td>
<td><button class="btn btn-primary edit" tid="2">修改</button></td>
</tr>
<tr class="item" aid="3" id="3" sort="3">
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>显示</td>
<td><button class="btn btn-primary edit" tid="3">修改</button></td>
</tr>
</tbody>
</table>
</div>
</form>
</body>
</html>
需要注意的问题：
1、文件的调用
<link rel="stylesheet" href="../csscool/css/jquery-ui.min.css">
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../csscool/js/jquery.min.js"></script>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../csscool/js/jquery-ui.min.js"></script>
2、对DOM元素的操作：
$( "#sortable tbody" ).sortable();
$( "#sortable tbody" ).disableSelection();
共同学习，写下你的评论
评论加载中...
作者其他优质文章
