jQuery之Nestable
浏览数：194 /
时间：2015年06月09日
空间属性置顶：
| 属性 | 说明 |
| 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个顺序，那这种操作，就是刚买电脑的小学生都会灵活运用了。
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
