jquery ui 之图片sortable
今晚无事,翻出来以前的一个练手作品,看了下,还是蛮有意义的,特分享出来,其实也不是太难的东西,就是留个记忆.
点击下载 文件
废话不多说,先看效果图:
大概的实现功能通过这张图应该能看的很清楚了,就是鼠标点击拖动图片交换位置
下面贴下实现的html+js代码,当然用到的插件,可以点击上面的下载链接下载,或直接去jquery-ui的
代码:
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>Pic Sort</title>
6 <link rel="stylesheet" href="css/base/jquery.ui.all.css">
7 <script src="js/jquery-1.6.2.js"></script>
8 <script src="js/jquery.ui.core.js"></script>
9 <script src="js/jquery.ui.widget.js"></script>
10 <script src="js/jquery.ui.mouse.js"></script>
11 <script src="js/jquery.ui.draggable.js"></script>
12 <script src="js/jquery.ui.sortable.js"></script>
13 <style>
14 *{list-style:none; margin:0; padding:0;}
15 .clearfix:after {visibility: hidden;display: block;font-size: 0;content: " ";clear: both;height: 0;}
16 .clearfix { display: inline-table; }
17 .clearfix { display: block; }
18 #pic{margin:20px; border:1px solid #ccc; width:630px; padding:0 0 10px 10px;}
19 #pic ul li{float:left; width:140px; height:105px; margin:10px 10px 0 0; padding:2px; border:1px solid #ccc; cursor:move;}
20 #pic ul{line-height:0px;}
21 #pic ul li.border{border:1px solid #444;}
22 </style>
23 </head>
24
25 <body>
26 <div id="pic">
27 <ul class="clearfix">
28 <li><img src="img/01.jpg" width="140" height="105"></li>
29 <li><img src="img/02.jpg" width="140" height="105"></li>
30 <li><img src="img/03.jpg" width="140" height="105"></li>
31 <li><img src="img/04.jpg" width="140" height="105"></li>
32 <li><img src="img/05.jpg" width="140" height="105"></li>
33 <li><img src="img/06.jpg" width="140" height="105"></li>
34 <li><img src="img/07.jpg" width="140" height="105"></li>
35 <li><img src="img/08.jpg" width="140" height="105"></li>
36 <li><img src="img/09.jpg" width="140" height="105"></li>
37 <li><img src="img/10.jpg" width="140" height="105"></li>
38 </ul>
39 </div>
40
41 <script type="text/javascript">
42 $(function() {
43 $( "#pic>ul" ).sortable({ containment: "#pic" , opacity: 0.6 , cursorAt:{top:60,left:70}});
44 $( "#pic>ul" ).disableSelection();
45
46 $("#pic>ul>li").mouseover(function(){
47 $(this).addClass("border");
48 }).mouseleave(function(){
49 $(this).removeClass("border");
50 });
51 });
52 </script>
53 </body>
54 </html>
特记之~
