将每个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. Android 性能优化——内存篇

    一.android官方一些内存方面的内存tips 1.避免创建不必要的对象. 如尽量避免字符串的加号拼接,可以使用StringBuilder来拼接. 如果需要TextView设置多个字符串片段,可以使 ...

  2. Java集成开发环境--Eclipse for J2EE配置JRE运行环境

    .d1 { border-style: none } .d2 { border-style: solid } .d3 { border-style: dotted } .d4 { border-sty ...

  3. C语言之printf函数

    一  基本用法 格式化控制符:%d %c %ld %lf 意思是:相当于在要输出的语句里面挖了一个坑,也就是在内存中开辟空间,然后再那个坑的位置(也就是开辟好的空间),填上你想要显示的值 printf ...

  4. C++ STD accumulate函数

    1. 介绍 用来计算特定范围内(包括连续的部分和初始值)所有元素的和,除此之外,还可以用指定的二进制操作来计算特定范围内的元素结果.其头文件在numeric中. 用次函数可以求和,构造前n项和的向量, ...

  5. win7无声音显示“未插入扬声器或耳机” 怎么解决

    不知道是否有用户朋友跟本人遇到这么一个情况,电脑不论是不是有插上耳机或者扬声器,在机箱前面和后面的耳机插孔处都试了好几遍,win8纯净版系统依旧没有声音. 这时候我们来看一下桌面右下角音量图标显示一个 ...

  6. kafka删除topic的方法及我在kafka上边的一些经验

    我在本地做kafka的producer调试,每隔一段时间后,所使用的topic管道就会堆积数据,而且我这边使用的是  kafka   bin 下的consumer命令单独消费的,每次都是  --fro ...

  7. java的return区别

    return ;和return null的区别在于:前者当方法返回值为void时候,return ; 跳出方法. 后者当方法的返回值为object对象时,return null,跳出方法,返回值为空值 ...

  8. 纯CSS实现tab选项卡切换

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta cont ...

  9. Linux环境快速搭建RocketMQ双Master模式

    RocketMQ的集群部署方式有多种,其中包括单个Master.多个Master.多Master多Slave模式(异步复制)以及多Master多Slave模式(同步双写).本次以多Master集群模式 ...

  10. 转：Monoids and Finger Trees

    转自:http://apfelmus.nfshost.com/articles/monoid-fingertree.html This post grew out of the big monoid ...