工作中需要將一個左邊的設計好的控件,拖曳到右邊的面板中,同時保持右邊面板中的控件自由排序,這時候就需要及支持拖曳又支持排序的操作了,本文主要為為大家帶來一篇jQuery UI Draggable + Sortable 結合使用(實例講解)。小編覺得蠻不錯的,現在就分享給大家,也給大家做個參考。一起跟著小編過來看看吧,希望能幫助大家。
Demo截圖:從左邊控制項拖曳到右邊區域
#程式碼片段:
<script type="text/javascript"> $(function () { $("#box_wrap1,#box_wrap2").sortable({ connectWith: ".box_wrap", helper: "clone", cursor: "move",//移动时候鼠标样式 opacity: 0.5, //拖拽过程中透明度 placeholder: "box-holdplace",//占位符className,设置一个样式 }).disableSelection(); $(".dragable").draggable({ connectToSortable: ".sortable", helper: "clone", // revert: "invalid", // handle: ".handle" }); }); </script>
Html 程式碼:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link href="js/bootstrap/css/bootstrap.css" rel="external nofollow" rel="stylesheet" /> <link href="js/bootstrap/css/bootstrap-theme.min.css" rel="external nofollow" rel="stylesheet" /> <link href="css/index.css" rel="external nofollow" rel="stylesheet" /> <script src="js/jquery-1.10.2.min.js"></script> <script src="js/bootstrap/js/bootstrap.min.js"></script> <!--Sortable --> <script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> </head> <body> <p class="container"> <p class="row"> <p class="column col-md-6"> <p class="box_wrap " id="box_wrap1" > <p class="box dragable"> left-test1 </p> <p class="box dragable"> left-test2 </p> <p class="box dragable"> left-test3 </p> </p> </p> <p class="column col-md-6"> <p class="box_wrap sortable" id="box_wrap2"> <p class="box"> test1 </p> <p class="box"> test2 </p> <p class="box"> test3 </p> </p> </p> </p> </p> </body> </html>
相關推薦:
Yii Framework 開發教學課程Zii元件-Sortable範例_PHP教學
Yii Framework 開發教學課程Zii元件-Sortable範例
jquery中的sortable排序之後的保存狀態的解決方法_jquery
#以上是實例詳解jQuery UI Draggable + Sortable 結合使用的詳細內容。更多資訊請關注PHP中文網其他相關文章!