文档章节

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

博客园雪雁
 博客园雪雁
发布于 2017/10/24 17:26
字数 492
阅读 20
收藏 0

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

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为准吧,这里就不过多介绍了。

© 著作权归作者所有

博客园雪雁
粉丝 1
博文 32
码字总数 59827
作品 0
长宁
程序员
私信 提问
集成 Knockout 和 Twitter Bootstrap Popover

简介 Knockout 是一个功能强大,非常有用的 javascript 库,用于实现在模板中双向绑定的 MVVM(Model-View-ViewModel) 模式,并有内置的绑定支持来绑定数据到 HTML 元件上去。 Knockout 也支持...

oschina
2014/03/10
630
0
jQuery 排序插件--html5sortable

HTML5 Sortable 是一个 jQuery 插件,使用本地拖拽 API 来创建可排序的列表和网格。 特性: 小于 1KB (简化和压缩 ) 使用本地的拖拽 API 支持列表和网格风格的布局 类似 jQuery-UI 可排序插件...

滔哥
2013/12/24
4.6K
0
怎样实现sencha的拖拽自动排序功能呢

之前sencha1.1.0 案例中有个sortable 例子,2.2.0这个sortable就取消了,Sortable的properties也减少了很多……,现在的拖拽排序应该怎么实现呢...

xmqywx
2013/07/24
301
0
jQueryUI拖拽排序在DOM重新渲染之后失效

最近在用jQueryUI 的sortable做表格拖拽排序功能,但是每次拖拽成功向后台重新请求数据更新DOM的之后,拖拽事件就失效了,有什么办法在DOM重新渲染让sortable事件不失效的方法吗? 这是拖拽的...

马小跳111
2017/09/26
235
2
jquery ui --排序(Sortable)移动位置

新人刚接触这个jquery ui的能拖拽的排序 请问下 在我拖拽完了后 怎么能知道他向上或者下拖拽了几行 嗯 说白了就是定位下位置 因为要去改排序 让他拖拽完了后数据库里也变样的 请问下Sortabl...

一色琉璃
2016/01/11
1K
1

没有更多内容

加载失败,请刷新页面

加载更多

500行代码,教你用python写个微信飞机大战

这几天在重温微信小游戏的飞机大战,玩着玩着就在思考人生了,这飞机大战怎么就可以做的那么好,操作简单,简单上手。 帮助蹲厕族、YP族、饭圈女孩在无聊之余可以有一样东西让他们振作起来!...

上海小胖
25分钟前
3
0
关于AsyncTask的onPostExcute方法是否会在Activity重建过程中调用的问题

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 本文链接:https://blog.csdn.net/XG1057415595/article/details/86774575 假设下面一种情况...

shzwork
今天
7
0
object 类中有哪些方法?

getClass(): 获取运行时类的对象 equals():判断其他对象是否与此对象相等 hashcode():返回该对象的哈希码值 toString():返回该对象的字符串表示 clone(): 创建并返此对象的一个副本 wait...

happywe
今天
6
0
Docker容器实战(七) - 容器中进程视野下的文件系统

前两文中,讲了Linux容器最基础的两种技术 Namespace 作用是“隔离”,它让应用进程只能看到该Namespace内的“世界” Cgroups 作用是“限制”,它给这个“世界”围上了一圈看不见的墙 这么一...

JavaEdge
今天
8
0
文件访问和共享的方法介绍

在上一篇文章中,你了解到文件有三个不同的权限集。拥有该文件的用户有一个集合,拥有该文件的组的成员有一个集合,然后最终一个集合适用于其他所有人。在长列表(ls -l)中这些权限使用符号...

老孟的Linux私房菜
今天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部