jQuery UI 库文件官方下载: http://jqueryui.com/download
使用时,只需在工程中将 development-bundle 文件夹下的 themes 文件夹添加到新建 css 文件夹下,并将 ui 文件夹导入到工程中。然后在 html 文件中,按下列顺序导入js文件:
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript" src="ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="ui/jquery.ui.mouse.js"></script>
<script type="text/javascript" src="ui/jquery.ui.draggable.js"></script> //这个是根据需要导入,在此实现拖动效果
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>