<!DOCTYPE?html>
<html>
<head?lang="en">
????<meta?charset='utf-8'>
????<title>拖曳排序插件</title>
????<!--<link?href="style.css"?rel="stylesheet"?type="text/css"?/>-->
?<style?type="text/css">
????????#divtest?{
????????????width:?282px;
????????????font-size:?13px;
????????}
????????p{
????????????padding:?0px;
????????????margin:?0px;
????????????line-height:?23px;
????????}
????</style>
????<script?src="http://idcbgp.cn/data/jquery-1.8.2.min.js"?type="text/javascript"></script>
????<script?src="http://idcbgp.cn/data/jquery-ui-1.9.2.min.js"?type="text/javascript"></script>
</head>
<body>
<div?id="divtest">
????<div?id="title">
???????<ul>
???????????<li><a?href="#ul-1">我最喜歡的運動</a></li>
???????????<li><a?href="#ul-2">我最喜歡的球類</a></li>
???????</ul>
????????<div?id="ul-1">
????????????<p>1)足球</p>
????????????<p>2)散步</p>
????????????<p>3)籃球</p>
????????????<p>4)乒乓球</p>
????????????<p>5)騎自行車</p>
????????</div>
????????<div?id="ul-2">
???????????<p>1)足球</p>
???????????<p>2)散步</p>
???????????<p>3)籃球</p>
???????????<p>4)乒乓球</p>
???????????<p>5)騎自行車</p>
?????????</div>
????</div>
</div>
<script?type="text/javascript">
????$(function?()?{
????????$("#title").tabs({
????????????fx:{opacity:"toggle",height:"toggle"},
????????????event:"mouseover"
?})
????});
</script>
</body>
</html>
