ng-sortable-支持触屏的拖拽排序
1.首先是到https://github.com/a5hik/ng-sortable/tree/master/dist下载所需的文件:ng-sortable.min.js,ng-sortable.css,ng-sortable.style.css,并引用在项目中;
2.注入sortable的依赖项:angular.module('xyzApp', ['as.sortable', '....']);
3.用法:
<ul data-ng-model="data.topicContentList" as-sortable="dragControlListeners">
<li class="setFontSize" ng-repeat="topicContent in data.topicContentList"
style=" height:45px; list-style-type: none; cursor: move; clear: both; padding: 10px; margin-right: 20px;"
as-sortable-item>
<div style="width: 30px; float: left;">
<i class="glyphicon glyphicon-move" as-sortable-item-handle></i>
</div>
</li>
</ul>
data.topicContentList是我们要显示的内容的数组列表;
dragControlListeners是一个排序函数:
$scope.dragControlListeners = {
// triggered when item order is changed with in the same column (what happens here)
orderChanged: function (event) {
// 排序操作
}
}
4.在控制器中还可以定义其他的回调函数:
$scope.dragControlListeners = {
accept: function (sourceItemHandleScope, destSortableScope) {return boolean}//override to determine drag is allowed or not. default is true.
itemMoved: function (event) {//Do what you want},
orderChanged: function(event) {//Do what you want},
containment: '#board'//optional param.
clone: true //optional param for clone feature.
allowDuplicates: false //optional param allows duplicates to be dropped.
};
$scope.dragControlListeners1 = {
containment: '#board'//optional param.
allowDuplicates: true //optional param allows duplicates to be dropped.
};
ng-sortable-支持触屏的拖拽排序的更多相关文章
- html5 Sortable.js 拖拽排序源码分析
最近公司项目经常用到一个拖拽 Sortable.js插件,所以有空的时候看了 Sortable.js 源码,总共1300多行这样,写的挺完美的. 本帖属于原创,转载请出名出处. 官网http:// ...
- 支持触屏的jQuery轮播图插件
移动轮播图我看到两类, 一款是无线天猫的m.tmall.com和携程,实现了无缝轮播. 一款是蘑菇街的,没有实现无缝轮播. 我自己重写一个,类似天猫. 1.页面代码 <!DOCTYPE html ...
- 基于jQuery的移动轮播图(支持触屏)
移动轮播图我看到两款, 一款是无线天猫的m.tmall.com,实现了无缝轮播. 一款是蘑菇街的,没有实现无缝轮播. 我自己重写一个,类似蘑菇街 <!doctype html> <h ...
- javascript如何判断访问网页的设备及是否支持触屏功能
var system ={}; var p = navigator.platform; system.win = p.indexOf("Win") == 0; system.mac ...
- Android6.0 源码修改之 仿IOS添加全屏可拖拽浮窗返回按钮
前言 之前写过屏蔽系统导航栏功能的文章,具体可看Android6.0 源码修改之屏蔽导航栏虚拟按键(Home和RecentAPP)/动态显示和隐藏NavigationBar 在某些特殊定制的版本中要求 ...
- Sortable拖拽排序插件数据筛选
后台有拖拽排序功能,然而前段在开发的时候,一整页的数据都发给后端了. 于是查看前端代码,想到了如下解决办法,即先把排序前的保存,然后对比排序后的,有差异的才发回给后端. var new_ids_ord ...
- 使用knockout-sortable实现对自定义菜单的拖拽排序
在开始之前,照例,我们先看效果和功能实现. 关于自定义菜单的实现,这里就不多说了,需要了解的请访问:http://www.cnblogs.com/codelove/p/4838766.html 这里需 ...
- vue中基于sortablejs与el-upload实现文件上传后拖拽排序
今天做冒烟测试的时候发现商品发布有一个拖拽图片排序功能没做,赶紧加上 之前别的同事基于 vuedraggable 实现过这个功能,我这里自己深度封装了 el-upload ,用这种方式改动很大,而且感 ...
- RecyclerView拖拽排序和滑动删除实现
效果图 如何实现 那么是如何实现的呢?主要就要使用到ItemTouchHelper ,ItemTouchHelper 一个帮助开发人员处理拖拽和滑动删除的实现类,它能够让你非常容易实现侧滑删除.拖拽的 ...
随机推荐
- C++ Vector 使用心得 [转]
标准库Vector类型 使用需要的头文件:#include <vector>Vector:Vector 是一个类模板.不是一种数据类型. Vector<int>是一种数据类型. ...
- IP路由协议简析
RIP 路由信息协议 IGRP 内部网关协议 EIGRP 增强型内部网关路由协议 OSPF 开放最短路径优先 3种动态路由: 距离矢量:RIP/RIPv2 IGRP EIGRP 链路状态:OSP ...
- inline-block 前世今生
曾几何时,display:inline-block 已经深入「大街小巷」,随处可见 「display:inline-block; *display:inline; *zoom:1; 」这样的代码.如今 ...
- Android Volley框架的使用(三)
此博文源码下载地址 https://github.com/Javen205/VolleyDemo.git Image Request 为了更方便的使用Volley中的图片请求,我们同样先在Voll ...
- Java多线程技术学习笔记(一)
目录: 概述 多线程的好处与弊端 JVM中的多线程解析 多线程的创建方式之一:继承Thread类 线程的状态 多线程创建的方式之二:实现Runnable接口 使用方式二创建多线程的好处 多线程示例 线 ...
- 【WebForm】ASP.NET 使用 uploadify 上传文件
说明 ASP.NET中上传文件是很常见的一项功能,经常不用的话,可能会遗忘,为了,以后能方便的调用使用,在这里做个备份说明.最后,把做的简单的DEMO上传,方便看. 主要借鉴的这个博主的: Uploa ...
- Codeforces Round #335 (Div. 2) A. Magic Spheres 水题
A. Magic Spheres Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://www.codeforces.com/contest/606/ ...
- ubuntu完美卸载JDK
要删除 OpenJDK (如果已安装的话).首先,检查是安装的哪个 OpenJDK包. # dpkg --list | grep -i jdk 移除 openjdk包: # apt-get purge ...
- C#将html导出到word(基于wps)
由于客户需要,我们需要实现将网页导出到word中的功能,在此过程中,尝试使用过openoffice.itext.wordapi等各种方法,都不尽如人意.openoffice导出的问题图片信息在word ...
- 提高HTML5 canvas性能的几种方法
简介 HTML5 canvas 最初起源于苹果(Apple)的一项实验,现在已经成为了web中受到广泛支持的2D快速模式绘图(2Dimmediate mode graphic)的标准.许多开发者现在利 ...