空間屬性置頂：
| 屬性 | 說明 |
| change | 事件，當控件改變時觸發 |
| nestable | 方法，獲取順序JSON數據，形式如下： |
今天，有個剛畢業的同事要做一個“排序出港”的功能，看了他用的控件，炫酷程度驚呆了我，而且實現方式非常簡單。還是應驗了那句老話，你知道多少並不重要，重要的是如何利用你所知道的。
先來看效果：
這么炫酷的一個出港順序管理，出港順序直接通過拖拉船名控制。做了Web開發兩年，已經習慣了當用戶點擊的時候做什么操作。實際上，大部分操作都是和數據庫打交道。即使玩游戲也是如此，實際上通過拖動來控制順序是非常炫酷的。
下面用Nestable來嘗試實現下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Nestable lists</title> <!--[if !IE]> --> <script type="text/javascript"> window.jQuery || document.write("<script src='assets/js/jquery-2.0.3.min.js'>"+"<"+"/script>"); </script> <!-- <![endif]--> <script type="text/javascript" src="jquery-1.10.2.min.js"></script> <script type="text/javascript" src="bootstrap.min.js"></script> <script type="text/javascript" src="jquery-ui-1.10.3.full.min.js"></script> <script type="text/javascript" src="jquery.ui.touch-punch.min.js"></script> <script type="text/javascript" src="jquery.nestable.min.js"></script> <link href="assets/css/bootstrap.min.css" rel="stylesheet" /> <link rel="stylesheet" href="assets/css/font-awesome.min.css" /> <link rel="stylesheet" href="assets/css/ace.min.css" /> <script src="assets/js/jquery.nestable.min.js"></script> <script type="text/javascript"> jQuery(function($){ $('.dd').nestable(); $('.dd-handle a').on('mousedown', function(e){ e.stopPropagation(); }); $('[data-rel="tooltip"]').tooltip(); $('#nestable').nestable().on('change', function(){ var r = $('.dd').nestable('serialize'); $("#xx").html(JSON.stringify(r)); //改變排序之后的數據 }); $('#nestable').nestable().on('change', updateOutput); }); </script> </head> <body> <div id="xx">123</div> <div class="main-container" id="main-container"> <script type="text/javascript"> try{ace.settings.check('main-container' , 'fixed')}catch(e){} </script> <div class="main-container-inner"> <a class="menu-toggler" id="menu-toggler" href="#"> <span class="menu-text"></span> </a> <div class="main-content"> <div class="page-content"> <div class="row"> <div class="col-xs-12"> <div class="row"> <div class="col-sm-6"> <div class="dd" id="nestable"> <ol class="dd-list"> <li class="dd-item" data-id="1"> <div class="dd-handle"> Item 1 <i class="pull-right bigger-130 icon-warning-sign orange2"></i> </div> </li> <li class="dd-item" data-id="2"> <div class="dd-handle">Item 2</div> <ol class="dd-list"> <li class="dd-item" data-id="3"> <div class="dd-handle"> Item 3 <a data-rel="tooltip" data-placement="left" title="Change Event Date" href="#" class="badge badge-primary radius-5 tooltip-info pull-right white no-hover-underline"> <i class="bigger-120 icon-calendar"></i> </a> </div> </li> <li class="dd-item" data-id="4"> <div class="dd-handle"> <span class="orange">Item 4</span> <span class="lighter grey"> with some description </span> </div> </li> <li class="dd-item" data-id="5"> <div class="dd-handle"> Item 5 <div class="pull-right action-buttons"> <a class="blue" href="#"> <i class="icon-pencil bigger-130"></i> </a> <a class="red" href="#"> <i class="icon-trash bigger-130"></i> </a> </div> </div> <ol class="dd-list"> <li class="dd-item item-orange" data-id="6"> <div class="dd-handle"> Item 6 </div> </li> <li class="dd-item item-red" data-id="7"> <div class="dd-handle">Item 7</div> </li> <li class="dd-item item-blue2" data-id="8"> <div class="dd-handle">Item 8</div> </li> </ol> </li> <li class="dd-item" data-id="9"> <div class="dd-handle btn-yellow no-hover">Item 9</div> </li> <li class="dd-item" data-id="10"> <div class="dd-handle">Item 10</div> </li> </ol> </li> <li class="dd-item" data-id="11"> <div class="dd-handle"> Item 11 <span class="sticker"> <span class="label label-success arrowed-in"> <i class="icon-ok bigger-110"></i> </span> </span> </div> </li> <li class="dd-item" data-id="12"> <div class="dd-handle">Item 12</div> </li> </ol> </div> </div> </div> </div> </div> </div> </div> <div class="ace-settings-container" id="ace-settings-container"> <div class="btn btn-app btn-xs btn-warning ace-settings-btn" id="ace-settings-btn"> <i class="icon-cog bigger-150"></i> </div> <div class="ace-settings-box" id="ace-settings-box"> <div> <div class="pull-left"> <select id="skin-colorpicker" class="hide"> <option data-skin="default" value="#438EB9">#438EB9</option> <option data-skin="skin-1" value="#222A2D">#222A2D</option> <option data-skin="skin-2" value="#C6487E">#C6487E</option> <option data-skin="skin-3" value="#D0D0D0">#D0D0D0</option> </select> </div> <span> Choose Skin</span> </div> <div> <input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-navbar" /> <label class="lbl" for="ace-settings-navbar"> Fixed Navbar</label> </div> <div> <input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-sidebar" /> <label class="lbl" for="ace-settings-sidebar"> Fixed Sidebar</label> </div> <div> <input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-breadcrumbs" /> <label class="lbl" for="ace-settings-breadcrumbs"> Fixed Breadcrumbs</label> </div> <div> <input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-rtl" /> <label class="lbl" for="ace-settings-rtl"> Right To Left (rtl)</label> </div> <div> <input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-add-container" /> <label class="lbl" for="ace-settings-add-container"> Inside <b>.container</b> </label> </div> </div> </div> </div> <a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse"> <i class="icon-double-angle-up icon-only bigger-110"></i> </a> </div> </body> </html>
以上代碼實現的東西是，當用戶拖拉切換順序的時候，將順序的JSON輸出到頂部。
顯示效果如下：
當然，在切換的時候，如果不是顯示在頂部，而是發個AJAX去給數據庫Update個順序，那這種操作，就是剛買電腦的小學生都會靈活運用了。