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. java 对excel操作导入excel数据到数据库

    加入jar包jxl.jar ===================services层掉用工具类==================================== // 导入 public Lis ...

  2. Quartz.NET 2.0 学习笔记(1) :Quartz.NET简介

    http://www.cnblogs.com/lzrabbit/archive/2012/04/13/2447609.html

  3. 学会自己写jQuery插件(一)---基础

    第一步:定义插件 $(function() { $.fn.插件名称 = function(options) { var defaults = { Event : "click", ...

  4. 读loadBalance技术的一些笔记

    以前知道loadbalance的原理,但是仅仅是浅浅的了解过,今天看了一篇 10多年前 一位大神级别人物 写的文章 顿时学习了 http://www.linuxvirtualserver.org/zh ...

  5. Codeforces Round #310 (Div. 2) A. Case of the Zeros and Ones 水题

    A. Case of the Zeros and Ones Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/con ...

  6. 使用ServiceStackRedis链接Redis简介 [转]

      注:关于如何在windows,linux下配置redis,详见这篇文章:)          Discuz!NT中的Redis架构设计 目前网上有一些链接Redis的C#客户端工具,这里介绍其中也 ...

  7. libgo协程库:网络性能完爆ASIO异步模型(-O3测试)

    在purecpp社区的github组织中有一个协程库:https://github.com/yyzybb537/libgo 近日有用户找到我,想要了解一下libgo库在网络方面的性能,于是选取已入选标 ...

  8. 好记心不如烂笔头之JQuery学习,第二章

    jQuery获取元素不需要担心元素不存在而报错,但是无论怎样 $("#xxx") 是一定会有返回值的,无论存不存在元素,那么依然是要对元素做判断的,判断的方法常见两种 1.看返回的 ...

  9. 《UCD火花集1-2》读后感

                                                                      一个多月的时间都没有更新博客了,只因为9月份有了其他的任务,耽搁了一 ...

  10. RedHat Linux 安装oracle11g

    1.准备oracle安装文件Oracle11gR2包含两个文件linux_11gR2_database_1of2.zip和linux_11gR2_database_2of2.zip,将这两个文件通过S ...