angularjs 使用angular-sortable-view实现拖拽效果(包括拖动完成后的方法使用)
首先还是看效果图吧,方便大家可以快速得知是否是自己需要的功能:(抱歉电脑还未安装动图软件,先用.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实现拖拽效果(包括拖动完成后的方法使用)的更多相关文章
- JavaScript实现最简单的拖拽效果
一.一些无关痛痒的唠叨 拖拽还是挺不错的一个页面效果,我个人认为,其生命力在于可以让用户自己做一些操作,所谓自定义.例如: ①浏览器标签顺序的拖拽切换 现在基本上所有的选项卡式的浏览器都有顺序拖拽切换 ...
- Swift2.0下UICollectionViews拖拽效果的实现
文/过客又见过客(简书作者)原文链接:http://www.jianshu.com/p/569c65b12c8b著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”. 原文UICollecti ...
- RecyclerView 与 ItemTouchHelper 实现拖拽效果
截图 需求 App 开发新的需求,要求 RecyclerView 实现的九宫格样式可以拖拽,松手以后变更位置,类似于手机桌面拖动 app 变更位置. 分析 经过搜索,发现 support 中带有一个类 ...
- vue模块拖拽效果
正巧在之前面试中遇到问实现拖拽效果 当时面试的时候简单回答了实现的方式与逻辑. 现在闲来无事,把这个东西实现了一下. 原理很简单,写的很方便. 数据驱动,建立一个数组,数组初始长度为1 拖动触发时,添 ...
- element-UI ,Table组件实现拖拽效果
拖拽效果,先放效果图,步骤放在后面~~ 一.引入三方插件 1.引入sortable.js的包: npm install sortable.js --save 2.或者npm i -S vuedragg ...
- Vue.Draggable实现拖拽效果(采坑小记)
之前有写过Vue.Draggable实现拖拽效果(快速使用)(http://www.cnblogs.com/songdongdong/p/6928945.html)最近项目中要用到这个拖拽的效果,当产 ...
- jQuery的DOM操作实例(2)——拖拽效果&&拓展插件
一.原生JavaScript编写拖拽效果 二.jQuery编写的拖拽效果 三.在jQuery中拓展一个拖拽插件
- React.js实现原生js拖拽效果及思考
一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...
- js拖拽效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- NOIp2018集训test-10-17 (bike day3)
发现自己gradully get moodier and moodier了 负面情绪爆发地越来越频繁,根本out of control,莫名其妙地就像着了魔一样 为什么用英语大概是因为今天早上早自习因 ...
- Undefined exploded archive location(在myeclipse中TOMCAT不能发布程序。)
原因: 在工程转移过程中,导致工程的配置文件出错: 解决方法: 1.在工程目录下的.mymetadata文件中可能webrootdir被改无效了(把下面内容拷到你的 ...
- Core Data存储数据出错(This NSPersistentStoreCoordinator has no persistent stores (unknown))
Core Data存储数据的时候崩溃,崩溃信息: reason: 'This NSPersistentStoreCoordinator has no persistent stores (unknow ...
- VC++6.0注释快捷键的添加使用
在eclipse等编辑工具中都有注释代码的快捷键,但是vc++6.0没有. vc++是以VB为脚本来控制的,在网上找到了一个VB的脚本供大家使用. 工具/原料 VC++6.0 方法/步骤 打开VC ...
- 用VBA计算两个日期之间的工作日(去掉周末两天)
最近公司HR和Finance想算员工的工作天数,想让我帮忙写些VBA,自己从网上找了下代码,自己再改改,以下来自网络. 计算两个日期之间的工作日,用VBA,因量大,最好用数组做 Sub kk() Di ...
- #define与typedef区别
1) #define是预处理指令,在编译预处理时进行简单的替换,不作正确性检查,不关含义是否正确照样带入,只有在编译已被展开的源程序时才会发现可能的错误并报错.例如: #define PI 3.141 ...
- LCS(最长公共子序列问题)
LCS(Longest Common Subsequence),即最长公共子序列.一个序列,如果是两个或多个已知序列的子序列,且是所有子序列中最长的,则为最长公共子序列. 原理: 事实上,最长公 ...
- NB-IoT知识
通常,我们把物联网设备分为三类: ①无需移动性,大数据量(上行),需较宽频段,比如城市监控摄像头. ②移动性强,需执行频繁切换,小数据量,比如车队追踪管理. ③无需移动性,小数据量,对时延不敏感,比如 ...
- web攻击之八:溢出攻击(nginx服务器防sql注入/溢出攻击/spam及禁User-agents)
一.什么是溢出攻击 首先, 溢出,通俗的讲就是意外数据的重新写入,就像装满了水的水桶,继续装水就会溢出,而溢出攻击就是,攻击者可以控制溢出的代码,如果程序的对象是内核级别的,如dll.sys文件等,就 ...
- netty中的ByteBuf
网络数据的基本单位总是字节.Java NIO 提供了 ByteBuffer 作为它 的字节容器,但是这个类使用起来过于复杂,而且也有些繁琐. Netty 的 ByteBuffer 替代品是 ByteB ...