轉載地址：http://www.cnblogs.com/lihuiyy/archive/2012/08/08/2601683.html
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.拖動手柄
代碼如下：
按 Ctrl+C 複製代碼
按 Ctrl+C 複製代碼
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>
