将每个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. C#中常用关键字的作用

    ***new关键字:1.在堆中开辟空间 2.在开辟的空间中创建对象 3.调用对象的构造函数***this关键字:1.代表当前类的对象 2.调用自己的构造函数 ***return:1.立即结束本次方法2 ...

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

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

  3. Java 编译打包命令

    背景 编译 打包 解压 运行 参考 背景 我们有的时候总是要使用将自己写的工程编译成 class 文件,同时打包成 jar,虽然有各种工具可以帮助我们,但是毕竟掌握使用 java 本来的命令去做这些更 ...

  4. Mybatis学习笔记(三) 之Dao开发

    使用Mybatis开发Dao,通常有两个方法,即原始Dao开发方法和Mapper接口开发方法,常用还是Mapper接口开发. SqlSession的使用范围 public class test1 { ...

  5. 持续集成CI与自动化测试

      -------------------------------------------------------------------------------------------------- ...

  6. 个人PE流程备忘

    insmod memdisk     linux16 /boot/memdisk iso raw   initrd16 /iso/Win8PE.iso

  7. 读书笔记之《The Art of Readable Code》

    <The Art of Readable Code>- Dustin Boswell, Trevor Foucher    O'Reilly出版 整体认知:这本书写得很好,每一章后面的总结 ...

  8. android下拉刷新控件 android-pulltorefresh

    运行效果: 介绍:ListView.ViewPager.WevView.ExpandableListView.GridView.(Horizontal)ScrollView.Fragment上下左右拉 ...

  9. %type的用法

    //%type //如果声明的变量是直接映射到数据库的某一列上,那么就可以使用%type关键字将变量 //锚定到这个列上.这样做有什么好处呢? //比如: //declare v_ename scot ...

  10. SIGPIPE信号

    #include <sys/types.h> #include <sys/socket.h> #include <netinet/in.h> #include &l ...