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 一个帮助开发人员处理拖拽和滑动删除的实现类,它能够让你非常容易实现侧滑删除.拖拽的 ...
随机推荐
- weblogic日志小结
weblogic日志小结 http://blog.csdn.net/forest_hou/article/details/5468222
- jQuery Deferred(http://www.ruanyifeng.com/blog/2011/08/a_detailed_explanation_of_jquery_deferred_object.html)
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 个人分享:平时开发中感觉几款不错 IDE 、插件、工具
本人主业 C# 开发,由于是做 Web 开发,所以像 SQL.JavaScript 这些肯定经常要接触到.当然,平时本人也写过 Node.js.Java.Python之类,不过,这些只能讲简单了解而已 ...
- ST10 Bootstrap Loader
Bootstrap Loader The built-in bootstrap loader (BSL) of the ST10F269 provides a mechanism to load th ...
- Java常见排序算法之冒泡排序
在学习算法的过程中,我们难免会接触很多和排序相关的算法.总而言之,对于任何编程人员来说,基本的排序算法是必须要掌握的. 从今天开始,我们将要进行基本的排序算法的讲解.Are you ready?Let ...
- mongodb - 命令行增删改查
# insert db.person.insert({ }) db.person.insert({ }) db.person.insert({ }) db.person.insert({ }) # s ...
- C#的WinForm中制作饼状图和柱状图
using System; using System.IO;//用于文件存取 using System.Data;//用于数据访问 using System.Drawing;//提供画GDI+图形的基 ...
- 有趣的动画视图集合:Android View Animations
Android View Animations这个项目收集了各种有趣的动画效果. 所有效果: Attension Flash, Pulse, RubberBand, Shake, Swing, Wob ...
- java生成汉字验证码
java实现的汉字输入验证码,主要包含两个类,一个是生成验证码,一个是判断验证码输入是否正确,实现原理非常简单,将汉字和干扰线生成图片并将汉字保存到session,前台获取每次生成验证码图片并用文本框 ...
- Lucene的Vint类型详解
Lucene Vint压缩策略是,用每个字节的最高位做标志位,后7位为有效算术位,如果标志位为1,则说明后一个字节和当前字节是同一个数字,为0说明后一个字节是一个新的数字 Lucene源代码中进行存储 ...