拖曳排序插件的功能是将序列元素（例如<option>、<li>）按任意位置进行拖曳从而形成一个新的元素序列，实现拖曳排序的功能，它的调用格式为：
$(selector).sortable({options});
selector参数为进行拖曳排序的元素，options为调用方法时的配置对象，
例如，在页面中，通过加载sortable插件将<ul>元素中的各个<li>表项实现拖曳排序的功能，如下图所示：
在浏览器中显示的效果：
从图中可以看出，由于使用sortable插件绑定了<ul>元素，并设置了拖曳时的透明度，因此，<ul>中的各个<li>元素则能指定的透明度进行任意的拖曳排序。
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>拖曳排序插件</title> 5 <link href="style.css" rel="stylesheet" type="text/css" /> 6 <script src="http://www.imooc.com/data/jquery-1.8.2.min.js" type="text/javascript"></script> 7 <script src="http://www.imooc.com/data/jquery-ui-1.9.2.min.js" type="text/javascript"></script> 8 </head> 9 10 <body> 11 <div id="divtest"> 12 <div class="title"> 13 <span class="fl">我最喜欢的运动</span> 14 </div> 15 <div class="content"> 16 <ul> 17 <li>1)足球</li> 18 <li>2)散步</li> 19 <li>3)篮球</li> 20 <li>4)乒乓球</li> 21 <li>5)骑自行车</li> 22 </ul> 23 </div> 24 </div> 25 26 <script type="text/javascript"> 27 $(function () { 28 $("ul").sortable({ 29 delay:2, 30 opacity:0.2 31 }) 32 }); 33 </script> 34 </body> 35 </html>
1 #divtest 2 { 3 width: 282px; 4 } 5 #divtest .title 6 { 7 padding: 8px; 8 background-color:Blue; 9 color:#fff; 10 height: 23px; 11 line-height: 23px; 12 font-size: 15px; 13 font-weight: bold; 14 } 15 ul 16 { 17 float: left; 18 width: 280px; 19 padding: 5px 0px; 20 margin: 0px; 21 font-size: 14px; 22 list-style-type: none; 23 } 24 ul li 25 { 26 float: left; 27 width: 264px; 28 height: 32px; 29 line-height: 32px; 30 padding: 3px 8px; 31 border:solid 1px #ccc; 32 background-color:#eee; 33 cursor:move; 34 margin:2px 0px; 35 } 36 .fl 37 { 38 float: left; 39 } 40 .fr 41 { 42 float: right; 43 }
原文：http://www.cnblogs.com/binhuguang/p/4362296.html