jQuery UI & 下载 & 拖动组件

jQuery UI 库文件官方下载： http://jqueryui.com/download

使用时，只需在工程中将 development-bundle 文件夹下的 themes 文件夹添加到新建 css 文件夹下，并将 ui 文件夹导入到工程中。然后在 html 文件中，按下列顺序导入js文件：

1.拖动手柄

代码如下：

  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 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5 <title>draggable组件</title>
  6 <script type="text/javascript" src="../js/jquery-1.7.2.js"></script>
  7 <script type="text/javascript" src="../ui/jquery.ui.core.js"></script>
  8 <script type="text/javascript" src="../ui/jquery.ui.widget.js"></script>
  9 <script type="text/javascript" src="../ui/jquery.ui.mouse.js"></script>
 10 <script type="text/javascript" src="../ui/jquery.ui.draggable.js"></script>
 11 <style type="text/css">
 12 .message_box {
 13     width:250px;
 14     height:150px;
 15     filter:dropshadow(color=#666666, offx=3, offy=3, positive=2);
 16     float:left;
 17 }
 18 #mask {
 19     position:absolute;
 20     top:0;
 21     left:0;
 22     width:expression(body.clientWidth);
 23     height:expression(body.clientHeight);
 24     background:#666;
 25     filter:ALPHA(opacity=60);
 26     z-index:1;
 27     visibility:hidden
 28 }
 29 .message {
 30     border:#036 solid;
 31     border-width:1 1 3 1;
 32     width:95%;
 33     height:95%;
 34     background:#fff;
 35     color:#036;
 36     font-size:12px;
 37     line-height:150%
 38 }
 39 .header {
 40     background:#036;
 41     height:22px;
 42     font-family:Verdana, Arial, Helvetica, sans-serif;
 43     font-size:12px;
 44     padding:3 5 0 5;
 45     color:#fff;
 46 }
 47 #message_box1 .header {
 48     cursor:move;
 49 }
 50 ul {
 51     margin-right:25px;
 52 }
 53 .header div {
 54     display:inline;
 55     width:150px;
 56 }
 57 .header span {
 58     float:right;
 59     display:inline;
 60     cursor:hand
 61 }
 62 fieldset {
 63     margin-bottom:5px;
 64 }
 65 </style>
 66 </head>
 67 <body>
 68 <fieldset>
 69   <legend>说明</legend>
 70   1、在"精彩专题推荐1"中只能通过拖动标题来移动，这是因为在handle属性中定义该标题为拖动手柄。<br/>
 71   2、在"精彩专题推荐2"中除标题外都可以来作为拖动手柄，这是因为在cancel属性定义该标题不具有拖动功能。
 72 </fieldset>
 73 <div id="message_box1" class="message_box" >
 74   <div class="message" >
 75     <div class="header">
 76       <div>精彩专题推荐1</div>
 77       <span>×</span></div>
 78     <ul>
 79       <li>用爱温暖盲人心 </li>
 80       <li>莫奈 行走在光与色彩间的天才 </li>
 81       <li>秋寒来袭 谨防感冒 </li>
 82       <li>品茗闻香话茶道 </li>
 83       <li>秋季养生从食补做起 </li>
 84     </ul>
 85   </div>
 86 </div>
 87 <div id="message_box2" class="message_box" >
 88   <div class="message" >
 89     <div class="header">
 90       <div>精彩专题推荐2</div>
 91       <span>×</span></div>
 92     <ul>
 93       <li>用爱温暖盲人心 </li>
 94       <li>莫奈 行走在光与色彩间的天才 </li>
 95       <li>秋寒来袭 谨防感冒 </li>
 96       <li>品茗闻香话茶道 </li>
 97       <li>秋季养生从食补做起 </li>
 98     </ul>
 99   </div>
100 </div>
101 <script language="javascript" type="text/javascript">
102 $(document).ready(function(){
103     $("#message_box1").draggable({handle:".header"});
104     $("#message_box2").draggable({cancel:".header",cursor:"move"});
105     $("ul li").disableSelection();
106     
107 });
108 </script>
109 </body>
110 </html>

2.Helper元素

代码如下：

 1 <body>
 2 <fieldset>
 3   <legend>说明</legend>
 4   1、拖动"茄菲猫"时自身将随鼠标一起移动，helper为original。<br/>
 5   2、拖动"多啦A梦"时自身原始位置不变，而是创建一个副本随鼠标移动，helper为clone。还配合opacity属性设置了透明度。<br/>
 6   3、拖动"阿童木"时将会出现一个自定义的helper，它是由helper的回调函数来定义的。
 7 </fieldset>
 8 <div id="message_box1" class="message_box" >
 9   <div class="message" >
10     <div class="header">
11       <div>茄菲猫</div>
12       <span>×</span></div>
13     <img src="images/jiafeimao.jpg" /> </div>
14 </div>
15 <div id="message_box2" class="message_box" >
16   <div class="message" >
17     <div class="header">
18       <div>多啦A梦</div>
19       <span>×</span></div>
20     <img src="images/duolaeim.jpg" /> </div>
21 </div>
22 <div id="message_box3" class="message_box" >
23   <div class="message" >
24     <div class="header">
25       <div>阿童木</div>
26       <span>×</span></div>
27     <img src="images/atongmu.jpg" /> </div>
28 </div>
29 <script language="javascript" type="text/javascript">
30 $(document).ready(function(){
31     $("#message_box1").draggable({helper: "original"});
32     $("#message_box2").draggable({opacity: 0.7, helper: "clone"});
33     $("#message_box3").draggable({
34         cursor: "move",
35         cursorAt: { top: -10, left: -10 },
36         helper: function( event ) {
37                 return $( "<div class='ui-widget-header'>这里是自定义helper</div>" );
38             }
39 
40         });
41 });
42 </script>
43 </body>

3.限制拖动区域

代码如下：

 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 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>draggable组件</title>
 6 <script language="javascript" src="js/jquery-1.4.2.min.js"></script>
 7 <script type="text/javascript" src="js/jquery.ui.core.js"></script>
 8 <script type="text/javascript" src="js/jquery.ui.widget.js"></script>
 9 <script type="text/javascript" src="js/jquery.ui.mouse.js"></script>
10 <script type="text/javascript" src="js/jquery.ui.draggable.js"></script>
11 <link href="CSS/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />
12 <style type="text/css">
13 body {
14     font-size:14px;
15 }
16 #wrap {
17     clear:both;
18     margin: 10px auto 10px auto;
19     padding: 10px;
20     width: 620px;
21     height:150px;
22     background: #fff;
23     border: 5px solid #000;
24 }
25 .drag {
26     width:150px;
27     height:100px;
28     border: 2px solid #000;
29     float:left;
30     padding:5px;
31     margin: 0 10px 10px 0;
32 }
33 .miniDrag {
34     font-size:12px;
35     border: 2px solid #D6D6D6;
36     cursor:move
37 }
38 #box1 {
39     cursor: e-resize;
40 }
41 #box2 {
42     cursor: n-resize;
43 }
44 fieldset {
45     margin-bottom:5px;
46 }
47 </style>
48 </head>
49 <body>
50 <fieldset>
51   <legend>说明</legend>
52   1、box1和box2被限制只能在一个方向上拖动，由axis属性定义。<br/>
53   2、box3、box4和box5则被限制在指定区域内，由containment属性定义。
54 </fieldset>
55 <div id="box1" class="drag">我是box1，只能水平拖动。</div>
56 <div id="box2" class="drag">我是box2，只能垂直拖动。</div>
57 <div id="wrap">
58   <div id="box3" class="drag">我是box3，只能在这个容器内拖动。 </div>
59   <div id="box4" class="drag">我是box4，活动区域是整个窗口</div>
60   <div  class="drag">我是box
61     <div id="box5" class="miniDrag">我是box5，能在我的父容器内活动</div>
62   </div>
63 </div>
64 <script type="text/javascript" language="javascript">
65 $(document).ready(function(){
66     $("#box1").draggable({axis:"x"});
67     $("#box2").draggable({axis:"y"});
68     $("#box3").draggable({containment: "#wrap", scroll: false,cursor:"move"});
69     $("#box4").draggable({containment: "window",cursor:"move"});
70     $("#box5").draggable({containment: "parent",cursor:"move"});
71 });
72 </script>
73 </body>
74 </html>

4.自动吸附

代码如下：

 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 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>draggable组件</title>
 6 <script language="javascript" src="js/jquery-1.4.2.min.js"></script>
 7 <script type="text/javascript" src="js/jquery.ui.core.js"></script>
 8 <script type="text/javascript" src="js/jquery.ui.widget.js"></script>
 9 <script type="text/javascript" src="js/jquery.ui.mouse.js"></script>
10 <script type="text/javascript" src="js/jquery.ui.draggable.js"></script>
11 <style type="text/css">
12 body {
13     font-size:14px;
14 }
15 #wrap {
16     clear:both;
17     margin: 10px auto 10px auto;
18     width: 720px;
19     height:220px;
20     border: 1px solid #BFBFBF;
21     background-color: #fff;
22     background-image: url(images/40.JPG);
23 }
24 h1 {
25     color:#006;
26     font-size:24px;
27     font-weight:bold;
28     text-align:center;
29     margin-top:0px;
30 }
31 .drag {
32     width:121px;
33     height:100px;
34     border: 1px solid #000;
35     float:left;
36     margin: 0 20px 0 0;
37     background:#FFF;
38 }
39 
40 </style>
41 </head>
42 <body>
43 <h1>设置可拖动元素的吸附能力</h1>
44 <div id="wrap" >
45   <div id="box1" class="drag">box1,自动吸附到所有可拖动对象</div>
46   <div id="box2" class="drag">box2,仅可吸附到父容器</div>
47   <div id="box3" class="drag">box3,仅可吸附到父容器的内边</div>
48   <div id="box4" class="drag">box4,按20×20网格自动吸附</div>
49   <div id="box5" class="drag">box5,按40×40网格自动吸附</div>
50 </div>
51 <script type="text/javascript" language="javascript">
52 $(document).ready(function(){
53         $( "#box1" ).draggable({ snap: true });
54         $( "#box2" ).draggable({ snap: "#wrap" });
55         $( "#box3" ).draggable({ snap: "#wrap", snapMode: "inner" });
56         $( "#box4" ).draggable({ grid: [ 20,20 ] });
57         $( "#box5" ).draggable({ grid: [ 40, 40 ] });
58 });
59 </script>
60 </body>
61 </html>

5.重设拖动后的元素

代码如下：

  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 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5 <title>draggable组件</title>
  6 <script language="javascript" src="js/jquery-1.4.2.min.js"></script>
  7 <script type="text/javascript" src="js/jquery.ui.core.js"></script>
  8 <script type="text/javascript" src="js/jquery.ui.widget.js"></script>
  9 <script type="text/javascript" src="js/jquery.ui.mouse.js"></script>
 10 <script type="text/javascript" src="js/jquery.ui.draggable.js"></script>
 11 <style type="text/css">
 12 .message_box {
 13     width:180px;
 14     height:150px;
 15     filter:dropshadow(color=#666666, offx=3, offy=3, positive=2);
 16     float:left;
 17     margin-right:10px;
 18 }
 19 #mask {
 20     position:absolute;
 21     top:0;
 22     left:0;
 23 width:expression(body.clientWidth);
 24 height:expression(body.clientHeight);
 25     background:#666;
 26     filter:ALPHA(opacity=60);
 27     z-index:1;
 28     visibility:hidden
 29 }
 30 .message {
 31     border:#036 solid;
 32     border-width:1 1 3 1;
 33     width:95%;
 34     height:95%;
 35     background:#fff;
 36     color:#036;
 37     font-size:12px;
 38     line-height:150%
 39 }
 40 .header {
 41     background:#036;
 42     height:22px;
 43     font-family:Verdana, Arial, Helvetica, sans-serif;
 44     font-size:12px;
 45     padding:3px 5px 0px 10px;
 46     color:#fff;
 47     cursor:move;
 48 }
 49 ul {
 50     margin-right:25px;
 51 }
 52 .header div {
 53     display:inline;
 54     width:150px;
 55 }
 56 .header span {
 57     float:right;
 58     display:inline;
 59     cursor:hand;
 60 }
 61 fieldset {
 62     margin-bottom:5px;
 63 }
 64 .message_box img {
 65     width:100px;
 66     border:2px solid #D6D6D6;
 67     margin:10px;
 68 }
 69 </style>
 70 <link href="CSS/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />
 71 </head>
 72 <body>
 73 <fieldset>
 74   <legend>说明</legend>
 75   1、拖动"茄菲猫"结束时，自身将从鼠标位置自动返回原始位置。<br/>
 76   2、拖动"多啦A梦"结束时，副本将从鼠标位置自动返回原始位置。<br/>
 77   3、拖动"阿童木"结束时，自身将从鼠标位置自动返回原始位置。在这里可以设置返回间隔（单位：毫秒）
 78   <input type="text" value="1000" size="4" />
 79 </fieldset>
 80 <div id="message_box1" class="message_box" >
 81   <div class="message" >
 82     <div class="header">
 83       <div>茄菲猫</div>
 84       <span>×</span></div>
 85     <img src="images/jiafeimao.jpg" /> </div>
 86 </div>
 87 <div id="message_box2" class="message_box" >
 88   <div class="message" >
 89     <div class="header">
 90       <div>多啦A梦</div>
 91       <span>×</span></div>
 92     <img src="images/duolaeim.jpg" /> </div>
 93 </div>
 94 <div id="message_box3" class="message_box" >
 95   <div class="message" >
 96     <div class="header">
 97       <div>阿童木</div>
 98       <span>×</span></div>
 99     <img src="images/atongmu.jpg" /> </div>
100 </div>
101 <script language="javascript" type="text/javascript">
102 $(document).ready(function(){
103     $("#message_box1").draggable({revert: true});
104     $("#message_box2").draggable({revert: true,opacity: 0.7, helper: "clone"});
105     $("#message_box3").draggable({revert: true,revertDuration:1000});
106     $("input:text").keyup(function(){
107        var duration = 1000;
108        if ($("input:text").val() != "") {
109             duration = $("input:text").val();
110         }
111         $("#message_box3").draggable({revert: true,revertDuration:duration});
112 
113     });
114 });
115 </script>
116 </body>
117 </html>