3-3 拖曳排序插件——sortable
本节编程练习不计算学习进度，请电脑登录imooc.com操作

拖曳排序插件——sortable

拖曳排序插件的功能是将序列元素（例如<option>、<li>）按任意位置进行拖曳从而形成一个新的元素序列，实现拖曳排序的功能，它的调用格式为：

$(selector).sortable({options});

selector参数为进行拖曳排序的元素，options为调用方法时的配置对象，

例如，在页面中，通过加载sortable插件将<ul>元素中的各个<li>表项实现拖曳排序的功能，如下图所示：

在浏览器中显示的效果：

从图中可以看出，由于使用sortable插件绑定了<ul>元素，并设置了拖曳时的透明度，因此，<ul>中的各个<li>元素则能指定的透明度进行任意的拖曳排序。

任务

我来试试，亲自调用sortable插件对<ul>元素中的<li>表项进行拖曳排序。

在下列代码的第29、30行，调用插件的sortable()方法，实现按指定的透明度进行拖曳排序的功能。

index.htmlstyle.css 
  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.                     ?
  30.                     ?
  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. }
下一节