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-支持触屏的拖拽排序的更多相关文章

  1. html5 Sortable.js 拖拽排序源码分析

    最近公司项目经常用到一个拖拽 Sortable.js插件,所以有空的时候看了 Sortable.js 源码,总共1300多行这样,写的挺完美的.   本帖属于原创,转载请出名出处. 官网http:// ...

  2. 支持触屏的jQuery轮播图插件

    移动轮播图我看到两类, 一款是无线天猫的m.tmall.com和携程,实现了无缝轮播. 一款是蘑菇街的,没有实现无缝轮播. 我自己重写一个,类似天猫. 1.页面代码 <!DOCTYPE html ...

  3. 基于jQuery的移动轮播图(支持触屏)

    移动轮播图我看到两款, 一款是无线天猫的m.tmall.com,实现了无缝轮播. 一款是蘑菇街的,没有实现无缝轮播. 我自己重写一个,类似蘑菇街 <!doctype html> <h ...

  4. javascript如何判断访问网页的设备及是否支持触屏功能

    var system ={}; var p = navigator.platform; system.win = p.indexOf("Win") == 0; system.mac ...

  5. Android6.0 源码修改之 仿IOS添加全屏可拖拽浮窗返回按钮

    前言 之前写过屏蔽系统导航栏功能的文章,具体可看Android6.0 源码修改之屏蔽导航栏虚拟按键(Home和RecentAPP)/动态显示和隐藏NavigationBar 在某些特殊定制的版本中要求 ...

  6. Sortable拖拽排序插件数据筛选

    后台有拖拽排序功能,然而前段在开发的时候,一整页的数据都发给后端了. 于是查看前端代码,想到了如下解决办法,即先把排序前的保存,然后对比排序后的,有差异的才发回给后端. var new_ids_ord ...

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

    在开始之前,照例,我们先看效果和功能实现. 关于自定义菜单的实现,这里就不多说了,需要了解的请访问:http://www.cnblogs.com/codelove/p/4838766.html 这里需 ...

  8. vue中基于sortablejs与el-upload实现文件上传后拖拽排序

    今天做冒烟测试的时候发现商品发布有一个拖拽图片排序功能没做,赶紧加上 之前别的同事基于 vuedraggable 实现过这个功能,我这里自己深度封装了 el-upload ,用这种方式改动很大,而且感 ...

  9. RecyclerView拖拽排序和滑动删除实现

    效果图 如何实现 那么是如何实现的呢?主要就要使用到ItemTouchHelper ,ItemTouchHelper 一个帮助开发人员处理拖拽和滑动删除的实现类,它能够让你非常容易实现侧滑删除.拖拽的 ...

随机推荐

  1. 将nginx配置为服务,php-fpm配置说明

    编写shell脚本 vi /etc/init.d/nginx #!/bin/bash # # Startup script for the PHP-FPM server. # # chkconfig: ...

  2. C:函数

    函数 函数:都是实现一定的功能.具有特定功能的代码段.凡是由系统提供的函数就是库函数,自己写的函数就是自定义函数. 如何定义一个函数  :  函数类型修饰符  函数名 (函数参数)  {  函数语句 ...

  3. WSO2 ESB

    什么是WSO2 ESB? WSO2 ESB是一个轻量级的易于使用的企业服务资源总线.WSO2 ESB允许系统管理员和SOA架构师,消息路由,虚拟化,中介,转换,日志记录,任务调度,负载平衡,失败了路由 ...

  4. Oracle主键自增的实现

    create sequence seq_字段名_表名 minvalue 1 maxvalue 999999999999999999999999999 start with 1 increment by ...

  5. Putty 工具 保存配置的 小技巧

    用Putty 已经很长时间了,但一直被一个问题困扰,有时候是懒得去弄,反正也不怎么碍事,今天小研究了下,把这个问题解决了,心里也舒服了. Putty是一个免费小巧的Win32平台下的telnet,rl ...

  6. 收集计算机分区信息,去除列中的重复值(Excel)(空行)

    收集计算机分区信息 $servers = gc D:\serverlist.txt $result = $results = $null $results = @() foreach ($server ...

  7. ProbS CF matlab源代码(二分系统)(原创作品,转载注明出处,谢谢!)

    %ProbS clear all;%% 数据读入与预处理 data = load('E:\network_papers\u1.base');test = load('E:\network_papers ...

  8. HDU 4286 Data Handler 双向链表/Splay

    Data Handler Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.hdu.edu.cn/showproblem.php?pid= ...

  9. Codeforces Round #260 (Div. 1) D. Serega and Fun 分块

    D. Serega and Fun Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/455/pro ...

  10. 一款基于jQuery轮播切换焦点图,可播放多张图片

    今天给大家分享一款基于jQuery轮播切换焦点图,可播放多张图片,在这个组件中,你可以任意指定8张图片,然后插件就会帮你自动生成缩略图,并且自动开始切换播放图片.当然,你也可以手动切换图片,只要点击缩 ...