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 一个帮助开发人员处理拖拽和滑动删除的实现类,它能够让你非常容易实现侧滑删除.拖拽的 ...
随机推荐
- Mes首检确认统计的存储过程
USE [ChiefmesNEW]GO/****** Object: StoredProcedure [dbo].[st_MES_RptInspectFirstCollect] Script Date ...
- Oracle 将不同列的值拼接成一个 字符串
利用拼接操作符“||”或者 CONCAT('','')函数,将不同列的值 拼接成一个 字符串 -- 方法一:推荐 SELECT S.TEAM ||'**'|| S.NAME ||'**'|| S. ...
- 解决Unable to connect to a repository at URL 禁止访问 (forbidden)
连接SVN报如下错误. Unable to connect to a repository at URL 禁止访问 (forbidden) 1. 右键点击本地副本,TortoiseSV ...
- Firefox插件一键切换兼容IE
转载:http://mozilla.com.cn/thread-42137-1-1.html 让火狐兼容IE的双核扩展,一键切换至IE内核,网银支付无忧愁.支持Adblock plus和FireGes ...
- jQuery性能优化的28个建议
我一直在寻找有关jQuery性能优化方面的小窍门,能让我那臃肿的动态网页应用变得轻便些.找了很多文章后,我决定将最好最常用的一些优化性能的建议列出来.我也做了一个jQuery性能优化的简明样式表,你可 ...
- PHPCMS教程
第一章 模版 参见:http://blog.163.com/zh_astro/blog/static/1842084562011430430419/ 碎片管理: 在模版页面需要添加碎片的位置加上代码{ ...
- 试读《JavaScript语言精髓与编程实践》
有幸看到iteye的活动,有幸读到<JavaScript语言精髓与编程实践_第2版>的试读版本,希望更有幸能完整的读到此书. 说来读这本书的冲动,来得很诡异,写一篇读后感,赢一本书,其实奖 ...
- 你应该知道的c# 反射详解
C#反射 首先了解C#反射的概念,反射是一个运行库类型发现的过程.通过反射可以得到一个给定程序集所包含的所有类型的列表, 这个列表包括给定类型中定义的方法.字段.属性和事件.也可以动态的发现一组给定类 ...
- [051] 微信公众平台开发教程第22篇-怎样保证access_token长期有效
为了使第三方开发人员能够为用户提供很多其它更有价值的个性化服务,微信公众平台开放了很多接口,包含自己定义菜单接口.客服接口.获取用户信息接口.用户分组接口.群发接口等,开发人员在调用这些接口时.都须要 ...
- 模块化JavaScript设计模式(一)
在可扩展JavaScript的世界里,假设我们说一个应用程序是模块化(modular)的,那么通常意味着它是由一系列存储于模块中的高度解耦,不同的功能片段组成. 在可能的情况下.通过一处依赖性.松耦合 ...