将每个li并列排序，同时可以实现拖拉排序功能

html：

js：使用的插件：html.sortable.angularjs,html.sortable.js

实现的效果：

通过js中sortableOptions中的placeholder的修改class中的样式 和html中li的样式对应。如果html中的col-md-2，和js中placeholder中的col-md-2都去掉，则是实现每个option占据一行，同样可以实现拖拉排序。

具体的demo可以查找：https://github.com/bachvtuan/html5-sortable-angularjs

angularjs中sortable的使用的更多相关文章

  1. AngularJS中get请求URL出现跨域问题

    今天早上帮助同学看了一个AngularJS的问题,主要是请求中出现了跨域访问,请求被阻止. 下面是她给我的代码: <html lang="en" ng-app="m ...

  2. AngularJS 中的Promise --- $q服务详解

    先说说什么是Promise,什么是$q吧.Promise是一种异步处理模式,有很多的实现方式,比如著名的Kris Kwal's Q还有JQuery的Deffered. 什么是Promise 以前了解过 ...

  3. AngularJS中的表单验证

    AngularJS中的表单验证 AngularJS自带了很多验证,什么必填,最大长度,最小长度...,这里记录几个有用的正则式验证 1.使用angularjs的表单验证 正则式验证 只需要配置一个正则 ...

  4. 关于angularjs中的jQuery

    关于angularjs中的jQuery 下面是一个小例子,用来说明我经常看到的一种模式.我们需要一个开关型的按钮.(注意:这个例子的代码有点装逼,并且有点冗长,只是为了用来代表更加复杂一些的例子,这些 ...

  5. angularjs中的directive scope配置

    angularjs中的directive scope配置 定义directive其中重要的一环就是定义scope,scope有三种形式: 默认的scope,DOM元素上原有的scope scope: ...

  6. angularjs中provider，factory，service的区别和用法

    angularjs中provider,factory,service的区别和用法 都能提供service,但是又有差别 service 第一次被注入时实例化,只实例化一次,整个应用的生命周期中是个单例 ...

  7. 初次使用AngularJS中的ng-view,路由控制

    AngularJS中的route可以控制页面元素的改变,使多页面变成一个单页面 第一步:引入必要的js: <script src="js/lib/angular.js"> ...

  8. 在AngularJS中的使用Highcharts图表控件

    一.Highcharts简介 Highcharts是一款非常好用的前端图表控件,正如其中文网介绍的那样:功能强大.开源.美观.图表丰富.兼容绝大多数浏览器的纯js图表库. 如果你的项目是基于jquer ...

  9. AngularJS中的指令全面解析（转载）

    说到AngularJS,我们首先想到的大概也就是双向数据绑定和指令系统了,这两者也是AngularJS中最为吸引人的地方.双向数据绑定呢,感觉没什么好说的,那么今天我们就来简单的讨论下AngularJ ...

随机推荐

  1. 如何实现自己的ClassLoader

    摘自深入分析java web技术内幕

  2. jquery uploadifive使用

    应为考虑到flash将逐渐被淘汰,所以选择了uploadfive完成上传 js文件和css文件自行下载,我上传了免费版(啃爹的官网竟然收费) 文件引入之后: <input type=" ...

  3. Js-Html 前端系列--页面撑开头尾

    今天学习过程中,发现一个超实用的方法,就是当页面有尾部,但是内容又不多的情况下,让中间的内容把尾部撑到底部. <script type="text/javascript"&g ...

  4. React入门实例

    前言 React 的核心思想是:封装组件,各个组件维护自己的状态和UI,当状态变更,自动重新渲染整个组件. 理解:react首先值得拍手称赞的是它所有的开发都基于一个组件(component),组件和 ...

  5. CSS align-content 属性

    实例 对齐弹性盒的 <div> 元素的各项: div { display: flex; flex-flow: row wrap; align-content:space-around; } ...

  6. NG2入门 - 架构

    AngularJS2 学习 继TypeScript之后,终于到了ng2的学习路程,同样学习根据angular官网文档进行,对文档中的内容根据自己的理解略有改动.看官可看官网文档,也可以看本系列博文 首 ...

  7. Android Tips

    (1).设置图片缓存大小,一般可以设置为内存的1/8 int memoryCache = (int) (Runtime.getRuntime().maxMemory() / 8); (2). (3). ...

  8. python中的编码声明

    python中的第一行,目的就是指出,你想要你的这个文件中的代码用什么可执行程序去运行它,就这么简单 #!/usr/bin/python 相当于写死了 python 路径(是告诉OS执行这个py时,调 ...

  9. 解析Properties文件

    /** * 传入需要解析的文件属性,传入文件的路径 * @param para 需要获取的属性名称.也就是键值对中的键名称 * @param filepath * @return */ public ...

  10. KMP 算法 学习 整理

    我自己整理的KMP算法的PDF文件:http://pan.baidu.com/s/1o8yKIi2提取密码:8291 别的就不多说啥了,感谢来自海子 博客园的 资料--