使用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為准吧，這里就不過多介紹了。