首先还是看效果图吧,方便大家可以快速得知是否是自己需要的功能:(抱歉电脑还未安装动图软件,先用.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. 【集成学习】lightgbm参数介绍(sklearn)

    #  XGBoost和LightGBM部分参数对比表: lightgbm.sklearn参数介绍(官网)

  2. tbody scroll

    http://jsfiddle.net/hashem/CrSpu/555/

  3. ACM学习历程—BZOJ2956 模积和(数论)

    Description 求∑∑((n mod i)*(m mod j))其中1<=i<=n,1<=j<=m,i≠j. Input 第一行两个数n,m. Output 一个整数表 ...

  4. JS数组的sort排序

    数组sort方法排序var aa=[6,2,1,5]//默认是从小到大排序aa.sort()[1, 2, 5, 6] //下面也是从小到大排序aa.sort(function(a,b){return ...

  5. JavaScript运行机制与setTimeout

    前段时间,老板交给了我一个任务:通过setTimeout来延后网站某些复杂资源的请求.正好借此机会,将JavaScript运行机制和setTimeout重新认真思考一遍,并将我对它们的理解整理如下. ...

  6. spring IOC 注解@Resource

    1.@Resource(重要)a)加入 :j2ee/common-annotations.jar b)默认按名称,名称找不到,按类型 默认按照名称setName1到xml中找和id相同的,没有的话再找 ...

  7. poj 2000 Gold Coins(水题)

    一.Description The king pays his loyal knight in gold coins. On the first day of his service, the kni ...

  8. openssh for windows

  9. python 基础 列表 增删改查

    names = ["aaron", "alex", "james", "meihengfan"]names2 = [1, ...

  10. SpringSecurity04 利用JPA和SpringSecurity实现前后端分离的认证和授权

    1 环境搭建 1.1 环境说明 JDK:1.8 MAVEN:3.5 SpringBoot:2.0.4 SpringSecurity:5.0.7 IDEA:2017.02旗舰版 1.2 环境搭建 创建一 ...