5_Interactions_sortable.html

<!DOCTYPE html>
<html>
 <head>
  <title> new document </title>
  <meta charset="utf-8">
	<link rel="stylesheet" href="jquery-ui-1.11.4/jquery-ui.css">
	<style>
		.list {
			list-style: none;
			padding: 0;
		}
		.list > li {
			padding: 6px;
			margin-bottom: 6px;
			border: 1px solid #aaa;
		}
		.ui-selected{
			border:1px solid #aaf; 
			background:#efefff;
		}
	</style>
 </head>
 <body>
  <h1>jQueryUI-Interactions</h1>

	<ul class="list">
		<li>鱼香肉丝</li>
		<li>京酱肉丝</li>
		<li>青椒肉丝</li>
		<li>萝卜肉丝</li>
	</ul>

	<!--注意JS文件的顺序-->
	<script src="js/jquery-1.11.3.js"></script>
	<script src="jquery-ui-1.11.4/jquery-ui.js"></script>
	<script>
		$(".list").sortable();
	</script>
 </body>
</html>