<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>sortable组件</title>
<script language="javascript" src="https://www.jb51.net/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="https://www.jb51.net/js/jquery.ui.core.js"></script>
<script type="text/javascript" src="https://www.jb51.net/js/jquery.ui.widget.js"></script>
<script type="text/javascript" src="https://www.jb51.net/js/jquery.ui.mouse.js"></script>
<script type="text/javascript" src="https://www.jb51.net/js/jquery.ui.sortable.js"></script>
<link href="https://www.jb51.net/CSS/base/jquery.ui.all.css" type="text/css" />
<style type="text/css">
body {
text-align:left;
margin:0 auto;
padding:0;
}
#wrap {
margin: 10px auto 10px auto;
padding: 5px;
width: 380px;
height:330px;
background: #fff;
border: 5px solid #000;
float: left;
}
#result {
margin: 10px;
padding: 2px;
width: 470px;
height:330px;
background: #fff;
border: 1px solid #999;
float: left;
}
h1 {
color:#006;
font-size:24px;
font-weight:bold;
margin-bottom:2px;
text-align:center;
}
#sortable, #connect {
list-style-type: none;
margin: 0;
padding: 0;
width: 100%;
}
#sortable li, #connect li {
margin: 3px;
padding: 0.4em;
font-size: 16px;
height: 18px;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$("#sortable").sortable({connectWith: '#connect'});
$("#connect").sortable();
$("#sortable").disableSelection();
$("#btn").click(function(){
var result = $("#sortable").sortable('serialize', {
connected: true,
attribute: 'att',
key: 'att',
expression: /^(?:sort_)(.+)$/
});
$('#msg').html($('#msg').html() + result + '<br />');
});
});
</script>
</head>
<body>
<div>
<h1>调整下列课程的安排顺序</h1>
<ul>
<li att="sort_1.1">1.1 链接外部.JS文件</li>
<li att="sort_1.2">1.2 使用Microsoft脚本编辑器</li>
<li att="sort_1.3">1.3 使用while循环</li>
<li att="sort_1.4">1.4 使用for循环</li>
</ul>
<ul>
<li att="sort_2.1">2.1 使用Switch语句</li>
<li att="sort_2.2">2.2 使用Array对象属性</li>
<li att="sort_2.3">2.3 使用String对象的方法</li>
<li att="sort_2.4">2.4 使用Date对象的方法</li>
</ul>
</div>
<div>
<input type="button" value="确认修改" />
<p></p>
</div>
</body>
</html>
效果图：
