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>