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. typedef block

    给同一种类型的block定义一个别名 typedef int (^MyBlock) (int , int); int main(int argc, const char * argv[]) { @au ...

  2. 结构类模式(七):代理(Proxy)

    定义 为其他对象提供一种代理以控制对这个对象的访问. 代理模式也叫做委托模式,它是一项基本设计技巧.许多其他的模式,如状态模式.策略模式.访问者模式本质上是在更特殊的场合采用了委托模式,而且在日常的应 ...

  3. python 缩进问题

    200 ? "200px" : this.width)!important;} --> 介绍 在python中认为规定4个空格缩进,缩进的代码可以理解成一个块,但是使用缩进也 ...

  4. Animation Spinner【项目】

    https://github.com/vjpr/healthkick/blob/master/src/win/healthkick/ucSpinnerCogs.xaml 网上的例子,放在UserCon ...

  5. 使用Canvas把照片转换成素描画

    原文:http://www.alloyteam.com/2012/07/convert-picture-to-sketch-by-canvas/ 腾讯的alloy team写的一个素描效果,挺不错的. ...

  6. (剑指Offer)面试题27:二叉搜索树与双向链表

    题目: 输入一棵二叉搜索树,将该二叉搜索树转换成一个排序的双向链表.要求不能创建任何新的结点,只能调整树中结点指针的指向. 二叉树的定义如下: struct TreeNode{ int val; Tr ...

  7. SCROLLINFO结构体中fMask和nPage的理解

    还是VC++中有关显示图像的问题. 我们在显示一幅比较大的图像时,要使用带标准滚动条的对话框.涉及对滚动条的操作就不得不提SCROLLINFO这个结构体.只看单词意思就这道这个结构体要储存滚动条的一些 ...

  8. PHP 打印调用函数入口地址(堆栈),方便调式

    今天网站出现一个BUG,然后直接在数据库类里面写日志,看是哪条SQL出了问题,SQL语句到是找到了,但是不知道这条SQL语句来自何处,于是就想啊,如果能有一个办法,查看当前正在运行的这个方法是被哪个方 ...

  9. [Unity3D]Unity3D游戏开发之在3D场景中选择物体并显示轮廓效果

    大家好,我是秦元培,欢迎大家关注我的博客,我的博客地址是blog.csdn.net/qinyuanpei. 在<仙剑奇侠传>.<古剑奇谭>等游戏中,常常须要玩家在一个3D场景中 ...

  10. Linux显示全部执行中的进程

    Linux显示全部执行中的进程 youhaidong@youhaidong-ThinkPad-Edge-E545:~$ ps aux | less USER PID %CPU %MEM VSZ RSS ...