溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
如下代碼：
<!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 src="../csscool/js/jquery.min.js"></script>
<script src="../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 style="text-align: center;">序號</th>
<th style="text-align: center;">名稱</th>
<th style="text-align: center;">類型代碼</th>
<th style="text-align: center;">含義</th>
<th style="text-align: center;">是否顯示</th>
<th style="text-align: center;">操作</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 src="../csscool/js/jquery.min.js"></script>
<script src="../csscool/js/jquery-ui.min.js"></script>
2、對DOM元素的操作：
$( "#sortable tbody" ).sortable();
$( "#sortable tbody" ).disableSelection();
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
