将每个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. 解决eclipse项目下出现deployment descriptor和jax-ws web services

    当你的web项目下出现这个这些鬼东西的时候,是视图的原因 1.右上角切换视图到java,看看问题解决了没,如果没有,第二步 2.window->perspective->reset per ...

  2. MVC源码解析 - Http Pipeline 解析(上)

    IHttpHandler applicationInstance = HttpApplicationFactory.GetApplicationInstance(context); 上一篇说到了创建 ...

  3. 01--css编码技巧--css揭秘

    一 尽量减少代码重复 1.按钮 #btn { padding: .3em .8em; border: 1px solid #446d88; background: #58a linear-gradie ...

  4. 果园种植系统开发App，游戏+商业模式？

    果园种植全返系统开发,英伦果园开发,微信果园种植系统开发,百果生态乐园开发,淘金农夫开发,农场果园种植游戏系统,果园种植APP系统开发,果园种植软件开发找陈牧150-1315-1740(微/电)开发者 ...

  5. 数据持久层框架iBatis, Hibernate 与 JPA 比较

    在本文中我们介绍并比较两种最流行的开源持久框架:iBATIS和Hibernate,我们还会讨论到Java Persistence API(JPA).我们介绍每种解决方案并讨论其所规定的品质,以及在广泛 ...

  6. C语言：XML学习

    说明:文章中代码是我参考别人的例子得来的. XML基础 一.XML的概念 Xml是一种可扩展标记语言.在电子计算机中,标记指计算机所能理解的信息符号,通过此种标记,计算机之间可以处理包含各种的信息比如 ...

  7. 词典 (noi OpenJudge)

    传送门:1806:词典 神奇的STL #include <iostream> #include <cstdio> #include <cstring> #inclu ...

  8. Leetcode-34-Search for a Range-(Medium)

    这道题借助二分查找算法来查找目标值的index 然后向前和向后分别搜索起始边界 注意开始排除异常值优化速度 #!/usr/local/bin/python3 # -*- coding: utf-8 - ...

  9. UGUI和现实世界的比例关系

    之前测试过默认大小的 Cube 在现实中的 比例关系,得出基本单位为 m 的结论,至于 UGUI和现实世界的比例关系 看下图就知道了: Cube Collider 的大小: Button 的大小: 其 ...

  10. [读书笔记]xampp mysql启动失败解析（win7）

    1.  [mysql]  MySQL Service detected with wrong path  [mysql]  Change XAMPP MySQL and Control Panel s ...