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

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

image

image

关于自定义菜单的实现,这里就不多说了,需要了解的请访问: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个示例,如下所示:

image

image

image

image

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

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

  • Knockout 2.0+
  • jQuery
  • jQuery UI

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

posted @   雪雁  阅读(2498)  评论(0编辑  收藏  举报
编辑推荐:
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
阅读排行:
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源!
· 周边上新:园子的第一款马克杯温暖上架
点击右上角即可分享
微信分享提示