使用knockout-sortable实现对自定义菜单的拖拽排序

在开始之前，照例，我们先看效果和功能实现。

关于自定义菜单的实现，这里就不多说了，需要了解的请访问：http://www.cnblogs.com/codelove/p/4838766.html

这里需要说明的是排序的实现。

我们先来看看关键的页面代码：

<div class="row">

                        <div class="col-lg-12 full-width" id="leftMenus">

                            <div class="col-lg-12">

                                <div class="dd" id="ddMenus" data-bind="if:Menus">

                                    <ol class="dd-list" data-bind="sortable:{template: 'menuListTmpl', data: Menus, afterMove: $root.dropCallback }">

                                    </ol>

                                </div>

                            </div>

                        </div>

                    </div>

                    <script id="menuListTmpl" type="text/html">

                        <li class="dd-item lv1">

                            <div class="dd-handle">

                                <span class="pull-right">

                                    <i class="fa fa-plus" data-bind="click:$root.AddClick"></i> &nbsp;&nbsp;

                                    <i class="fa fa-times" data-bind="click:$root.RemoveItem"></i>&nbsp;&nbsp;

                                    <i class="fa fa-pencil" data-bind="click:$root.ItemClick"></i>

                                </span>

                                <span>

                                    <span class="label label-info"><i class="fa" data-bind="css:$root.getIconCssByType(type)"></i></span>

                                    <span data-bind="text:name,click:$root.ItemClick" style="margin-left:10px;"></span>

                                </span>

                            </div>

                            <!-- ko if:$data.sub_button -->

                            <ol class="dd-list" data-bind="sortable:{template: 'menuItemTmpl', data: $data.sub_button, afterMove: $root.dropCallback }">

                            </ol>

                            <!-- /ko -->

                        </li>

                    </script>

如上所示，注意以下几点：

sortable：data-bind增加了sortable绑定，用于支持拖拽排序
afterMove：拖拽后触发事件

这里，我们需要看看拖拽后触发的事件代码：

this.dropCallback = function () {

            self.RefreshLocalData();

        };

        this.RefreshLocalData = function (menus) {

            var menus = menus || ko.mapping.toJS(self.Menus())

            self.Menus([]);

            self.Menus(menus);

        }

这里值得注意的是，拖拽事件中，刷新了数据以便更新UI显示。

至于上面的sortable，则用到了一个ko组件——knockout-sortable。

该组件支持拖拽排序，并会自动更新observableArrays。基于此，你可以很方便的很简单的开发一些拖拽排序的业务。

以下是官方GitHub地址：https://github.com/rniemeyer/knockout-sortable

使用起来非常简单，官方还提供了4个示例，如下所示：

simple: http://jsfiddle.net/rniemeyer/hw9B2/

connected: http://jsfiddle.net/rniemeyer/Jr2rE/

draggable: http://jsfiddle.net/rniemeyer/AC49j/

seating chart: http://jsfiddle.net/rniemeyer/UdXr4/

上面这个Demo做排班或者课程安排的业务是非常简单的。

不过值得注意的是，knockout-sortable依赖以下几个库：

Knockout 2.0+
jQuery
jQuery UI

插件的具体使用请以官方文档和Demo为准吧，这里就不过多介绍了。

使用knockout-sortable实现对自定义菜单的拖拽排序的相关教程结束。