拖曳排序插件——sortable 

 1 <html xmlns="http://www.w3.org/1999/xhtml">
 2     <head>
 3         <title>拖曳排序插件</title>
 4         <link href="style.css" rel="stylesheet" type="text/css" />
 5         <script src="http://www.imooc.com/data/jquery-1.8.2.min.js" type="text/javascript"></script>
 6         <script src="http://www.imooc.com/data/jquery-ui-1.9.2.min.js" type="text/javascript"></script>
 7     </head>
 8     
 9     <body>
10         <div id="divtest">
11             <div class="title">
12                 <span class="fl">我最喜欢的运动</span>
13             </div>
14             <div class="content">
15                 <ul>
16                     <li>1)足球</li>
17                     <li>2)散步</li>
18                     <li>3)篮球</li>
19                     <li>4)乒乓球</li>
20                     <li>5)骑自行车</li>
21                 </ul>
22             </div>
23         </div>
24         
25         <script type="text/javascript">
26             $(function () {
27                 $("ul").sortable({
28                     delay:2,//为防止点击事件冲突，延时2秒
29                     opacity:0.35//以及透明度0.35随意拖动
30                     });
31             });
32         </script>
33     </body>
34 </html>

 

posted @ 2015-04-23 14:50  aspnet_如月  阅读(269)  评论(0)    收藏  举报