将每个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. “Will not add file alias 'samefile' ('SameFile' already exists in index)” when `git add/commit` operation

    从远程仓库pull下来的代码有两个类类名首字母小写出现如下情况 然后我想删了重新写一下(就是把这个类删了,代码复制到名字正确的类里面),然后commit的时候出现这个错误,后来删一个commit一下, ...

  2. C#中的集合类——HashTable

    HashTable 被称为键值对集合,类似于字典,根据key可以找到value 键值对对象[键]=值;键值对集合当中,键必须是唯一的,而值是可以重复的 1. HashTable的用法 //创建了一个键 ...

  3. django form表单验证

    一. django form表单验证引入 有时时候我们需要使用get,post,put等方式在前台HTML页面提交一些数据到后台处理例 ; <!DOCTYPE html> <html ...

  4. php目录函数

    1.创建 mkdir()mkdir(目录地址,权限模式,是否递归创建)默认不支持递归创建,用第三个参数true表示递归创建 <?php header("content-type:tex ...

  5. quagga源码分析--大内总管zebra

    zebra,中文翻译是斑马,于是我打开了宋冬野的<斑马,斑马>作为BGM来完成这个篇章,嘿嘿,小资一把! zebra姑且戏称它是quagga项目的大内总管. 因为它负责管理其他所有协议进程 ...

  6. http缓存协议详解

    Cache-control策略(重点关注):Cache-Control与Expires的作用一致,都是指明当前资源的有效期,控制浏览器是否直接从浏览器缓存取数据还是重新发请求到服务器取数据 no-ca ...

  7. C#如何实现url短地址？C#短网址压缩算法与短网址原理入门

    c# url短地址压缩算法与短网址原理的例子,详细介绍了短网址的映射算法,将长网址md5生成32位签名串,分为4段,每段8个字节,然后生成短网址,具体见文本实例. 短网址映射算法: 将长网址md5生成 ...

  8. 在二叉搜索树(BST)中查找第K个大的结点之非递归实现

    一个被广泛使用的面试题: 给定一个二叉搜索树,请找出其中的第K个大的结点. PS:我第一次在面试的时候被问到这个问题而且让我直接在白纸上写的时候,直接蒙圈了,因为没有刷题准备,所以就会有伤害.(面完的 ...

  9. Android中AlertDialog对话框禁止按[返回键]或[搜索键]

    alertDialog.setOnKeyListener(new DialogInterface.OnKeyListener() { @Override public boolean onKey(Di ...

  10. iOS缓存

    存储缓存: 第三方应用只能把信息保存在应用程序的沙盒中.因为缓存数据不是用户产生的,所以它应该被保存在NSCachesDirectory,而不是NSDocumentsDirectory.为缓存数据创建 ...