首先还是看效果图吧,方便大家可以快速得知是否是自己需要的功能:(抱歉电脑还未安装动图软件,先用.png)

如果上图是你需要的功能效果图,那么请往下看,我有写出来例子哦~

使用这个插件有几个好处,首先:

1.只需要额外引入一个依赖包。angular-sortable-view.js即可

2.

核心代码:

    <div ng-controller="MyController as vm" class="background">
<div sv-root sv-part="vm.items" class="sv-container">
<div ng-repeat="item in vm.items" sv-element class="sv-cell">
<div>
<div>name: {{item.name}}</div>
<div>value: {{item.age}}</div>
</div>
<span class="sv-handle" sv-handle>拖拽手柄</span>
</div>
</div>
<hr/>
<div class="show-data">
{{vm.items}}
</div>
</div>

3.

一个重点常用的API

API:

sv-on-sort="foo($item, $partFrom, $partTo, $indexFrom, $indexTo)"

本案例代码:代码传送门:https://github.com/zhongqiulan/angular-sortable-view

注:有完整代码哦

官方文档,建议大家遇到瓶颈的时候无意识浏览浏览:

地址:

https://github.com/kamilkp/angular-sortable-view

angularjs 使用angular-sortable-view实现拖拽效果(包括拖动完成后的方法使用)的更多相关文章

  1. JavaScript实现最简单的拖拽效果

    一.一些无关痛痒的唠叨 拖拽还是挺不错的一个页面效果,我个人认为,其生命力在于可以让用户自己做一些操作,所谓自定义.例如: ①浏览器标签顺序的拖拽切换 现在基本上所有的选项卡式的浏览器都有顺序拖拽切换 ...

  2. Swift2.0下UICollectionViews拖拽效果的实现

    文/过客又见过客(简书作者)原文链接:http://www.jianshu.com/p/569c65b12c8b著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”. 原文UICollecti ...

  3. RecyclerView 与 ItemTouchHelper 实现拖拽效果

    截图 需求 App 开发新的需求,要求 RecyclerView 实现的九宫格样式可以拖拽,松手以后变更位置,类似于手机桌面拖动 app 变更位置. 分析 经过搜索,发现 support 中带有一个类 ...

  4. vue模块拖拽效果

    正巧在之前面试中遇到问实现拖拽效果 当时面试的时候简单回答了实现的方式与逻辑. 现在闲来无事,把这个东西实现了一下. 原理很简单,写的很方便. 数据驱动,建立一个数组,数组初始长度为1 拖动触发时,添 ...

  5. element-UI ,Table组件实现拖拽效果

    拖拽效果,先放效果图,步骤放在后面~~ 一.引入三方插件 1.引入sortable.js的包: npm install sortable.js --save 2.或者npm i -S vuedragg ...

  6. Vue.Draggable实现拖拽效果(采坑小记)

    之前有写过Vue.Draggable实现拖拽效果(快速使用)(http://www.cnblogs.com/songdongdong/p/6928945.html)最近项目中要用到这个拖拽的效果,当产 ...

  7. jQuery的DOM操作实例(2)——拖拽效果&&拓展插件

    一.原生JavaScript编写拖拽效果 二.jQuery编写的拖拽效果 三.在jQuery中拓展一个拖拽插件

  8. React.js实现原生js拖拽效果及思考

    一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...

  9. js拖拽效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. C语言访问MCU寄存器的两种方式

    转自http://blog.csdn.net/liming0931/article/details/7752248 单片机的特殊功能寄存器SFR,是SRAM地址已经确定的SRAM单元,在C语言环境下对 ...

  2. LiveMediaStreamer

    LiveMediaStreamer is an open source multimedia framework that allows the manipulation of multiple au ...

  3. openfire存储中文字符乱码解决办法

    转载于: Xmpp问题总结:处理Openfire 中文乱码问题(2) openfire是一个非常不错的IM服务器,而且是纯Java实现,具有多个平台的版本,他的数据存储可以采用多种数据库,如MySQL ...

  4. Oracle 12c 多租户配置和修改 CDB 和 PDB 参数

    1. 配置CDB 实例参数,影响CDB与所有 PDB为CDB配置例程参数相对于对于非CDB的数据库是变化不太.ALTER SYSTEM命令用于设置初始化参数,与使用ALTER DATABASE命令修改 ...

  5. android开发 MyEclipse下测试连接MySQL数据库

    1.首先要加载MySQL驱动包. 步骤:右击项目找到build path->configure build path->libraries——>add External JARs添加 ...

  6. NSSet 用法

    //集合NSSet //集合也是储存对象,和字典一样也是无序存储 //集合中里面的元素不能重复 //集合里面的元素可以随机取出 //用数组放到集合中 NSArray *a10 = @[p1 , p2 ...

  7. Floyd-Warshall算法:求结点对的最短路径问题

    Floyd-Warshall算法:是解决任意两点间的最短路径的一种算法,可以正确处理有向图或负权的最短路径问题,同时也被用于计算有向图的传递闭包. 原理: Floyd-Warshall算法的原理是动态 ...

  8. K Sum(2 Sum,3 Sum,4 Sum,3-Sum Closest)

    算是经典算法问题了.这里主要针对只存在一个解或者只需要求一个解的情况描述一下解题思路.若需要找到所有可能解,方法需要略作调整.如有问题,欢迎指正. 2 sum: 如果已排序,可直接用夹逼法,即两指针从 ...

  9. QTP连接数据库

    '注意:其中DSN=数据源名:UID=用户名:PWD=用户密码 Dim Conn Set Conn=CreateObject("ADODB.Connection") Const C ...

  10. Project Server调用PSI关闭任务以进行更新锁定任务

    /// <summary> /// 锁定和解锁项目任务 /// </summary> /// <param name="projectuid"> ...