jQuery之Nestable

发布日期:2018-02-09    浏览次数:661

  空间属性置顶:

属性 说明
change 事件,当控件改变时触发
nestable 方法,获取顺序JSON数据,形式如下:
[{"id":1},{"id":2},{"id":3,"children":[{"id":4},{"id":5}]}]

  今天,有个刚毕业的同事要做一个“排序出港”的功能,看了他用的控件,炫酷程度惊呆了我,而且实现方式非常简单。还是应验了那句老话,你知道多少并不重要,重要的是如何利用你所知道的。

  先来看效果:

  

  这么炫酷的一个出港顺序管理,出港顺序直接通过拖拉船名控制。做了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">
                                                                    &nbsp; 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>&nbsp; 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个顺序,那这种操作,就是刚买电脑的小学生都会灵活运用了。

本文网址:https://www.wyxxw.cn/blog-detail-1-5-288.html

返回列表

非特殊说明,本文版权归原作者所有,转载请注明出处

提示:本站所有资源仅供学习与参考,请勿用于商业用途。图片来自互联网~如侵犯您的权益,请联系QQ:1067507709.

提示:转载请注明来自:http://www.cnblogs.com/kissdodog/p/3945625.html 。 转载人:momo