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 ...
随机推荐
- mongodb与mysql的命令对比
mongodb与mysql命令对比 传统的关系数据库一般由数据库(database).表(table).记录(record)三个层次概念组成,MongoDB是由数据库(database).集合(col ...
- ACM学习历程—广东工业大学2016校赛决赛-网络赛E 积木积水(最值问题 || 动态规划)
题目链接:http://gdutcode.sinaapp.com/problem.php?cid=1031&pid=4 这个题目自然会考虑到去讨论最长或者最短的板子. 笔上大概模拟一下的话,就 ...
- Link-cut-tree 学习记录 & hdu4010
网上的lct一抓一大把,所以我也不再写什么讲解了,只写一写自己的看法. Link-cut-tree 是用于维护动态树的一种数据结构 所谓动态树就是一片存在边的添加与删除的森林中的一棵树 所以我们要快速 ...
- redis源码笔记 - redis-cli.c
这份代码是redis的client接口,其和server端的交互使用了deps目录下的hiredis c库,同时,在这部分代码中,应用了linenoise库完成类似history命令查询.自动补全等终 ...
- python中string和bool的转换
python中字符串"True" 和 "False"转为bool类型时, 不能通过bool(xx)强转. 注意是因为在python中,除了'& ...
- 一 ThreadLocal
(1) Threadlocal定义: 当使用ThreadLocal维护变量时,ThreadLocal为每个使用该变量的线程提供独立的变量副本,所以每一个线程都可以独立地改变自己的副本,而不会影响其它 ...
- javascript之系统对话框
浏览器通过alert(),confirm()和prompt()方法调用系统对话框,向用户显示信息. alert()接受一个字符串并显示给用户,结果是显示一个对话框,其中包括指定的文本和一个OK(“确定 ...
- vue.js解决刷新404找不到页面问题
1.将包解压到ROOT目录后创建WEB-INF目录 mkdir WEB-INF 2.进入WEB-INF目录,创建web.xml文件 cd WEB-INF touch web.xml 3.编辑web.x ...
- Java探索之旅(11)——抽象类与接口
1.Java数据类型 ❶不可变类,是指当创建了这个类的实例后,就不允许修改它的属性值. 它包括: Primitive变量:boolean,byte, char, doubl ...
- [matlab]bp神经网络工具箱学习笔记
基本就三个函数: newff():创建一个bp神经网络 train():训练函数 sim():仿真函数 同时具有可视化界面,但目前不知道可视化界面如何进行仿真,且设置不太全 工具箱:Neural ne ...