首先导入这几个资源

<link href="/css/jquery-ui-1.10.3.custom.css" rel="stylesheet" type="text/css" />

<script src="/js/jquery-1.7.2.min.js" type="text/javascript"></script>

<script src="/js/jquery-ui-1.10.3.custom.min.js" type="text/javascript"></script>

页面加载时执行

    $("#sortable").sortable({
opacity:0.8,
revert:true,
forceHelperSize:true,
placeholder: 'draggable-placeholder',
forcePlaceholderSize:true,
tolerance:'pointer',
stop: function( event, ui ) {
//just for Chrome!!!! so that dropdowns on items don't appear below other items after being moved
$(ui.item).css('z-index', 'auto');
$.post(
"/scheme/sortPointMenu",
{
keyList :$("#sortable").sortable('serialize'),
stageId:lvId
},
function(response){
}
);
}
});

sortable.js 华丽丽的排序的更多相关文章

  1. js实现table排序-sortable.js

    方案一.引用sortable.js包 /* <th class="thcss" style="width: 40px;" onclick="so ...

  2. html5 Sortable.js 拖拽排序源码分析

    最近公司项目经常用到一个拖拽 Sortable.js插件,所以有空的时候看了 Sortable.js 源码,总共1300多行这样,写的挺完美的.   本帖属于原创,转载请出名出处. 官网http:// ...

  3. 拖放排序插件Sortable.js 兼容好及功能全个人觉得比dragula.js 好的多

    经测试,Sortable.js 兼容好和使用方便都是比较不错的,特别手机端使用很棒 介绍 Sortable.js是一款轻量级的拖放排序列表的js插件(虽然体积小,但是功能很强大)下载地址:https: ...

  4. html5支持drag的拖放排序插件sortable.js

    html5支持drag的拖放排序插件sortable.js <script src="//cdnjs.cloudflare.com/ajax/libs/Sortable/1.5.1/S ...

  5. js 实现拖拽排序

    <!DOCTYPE> <html lang="zh-cn"> <head> <meta http-equiv="Content- ...

  6. Sortable.js

    拖拽的时候主要由这几个事件完成, ondragstart 事件:当拖拽元素开始被拖拽的时候触发的事件,此事件作用在被拖曳元素上 ondragenter 事件:当拖曳元素进入目标元素的时候触发的事件,此 ...

  7. sortable结合angularjs实现拖动排序

    记录拖动排序 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  8. 列拖拽顺序调整-sortable.js使用

    最近在做一个单表统计功能,涉及到一个查询列配置,但是查询出来的列顺序,可以进行配置,通过写列的排序当然阔以,但是方法就不美丽了.所以,在网上搜了一下拖拽的组件,最终定位Sortable.js,简单易用 ...

  9. vuejs2.0使用Sortable.js实现的拖拽功能

    简介 在使用vue1.x之前的版本的时候,页面中的拖拽功能,我在项目中是直接用的jquery ui中的sortable.js,只是在拖拽完成后,在update的回调函数中又重新排序了存放数据的数组.但 ...

随机推荐

  1. uva 10763 Foreign Exchange(排序比较)

    题目连接:10763 Foreign Exchange 题目大意:给出交换学生的原先国家和所去的国家,交换成功的条件是如果A国给B国一个学生,对应的B国也必须给A国一个学生,否则就是交换失败. 解题思 ...

  2. python邮件发送脚本

    转自:http://phinecos.cnblogs.com/ #!/usr/bin/python #coding=utf-8 #@author:dengyike #@date:2010-09-28 ...

  3. Javascript数组的声明

    var cars=new Array(); cars[0]="Audi"; cars[1]="BMW"; cars[2]="Volvo"; ...

  4. BootStrap 智能表单系列 五 表单依赖插件处理

    这一章比较简单哦,主要就是生产表单元素后的一些后续处理操作,比如日期插件的渲染.一些autocomplete的处理等,在回调里面处理就可以了, demo: $("input.date-pic ...

  5. 今天碰到的angular 中的一个小坑

    最近在自个儿研究angular,在写一个demo的时候总是有问题,最后发现居然是大小写的问题,卧槽 特tm的坑爹了,代码如下: <!DOCTYPE html> <html lang= ...

  6. js调试若干

    主要是将 chrome调试工具   firebug的控制台对以下都有支持 consoleAPI https://developers.google.com/chrome-developer-tools ...

  7. JavaEE学习之类加载器

    类装载子系统 在JAVA虚拟机中,负责查找并装载类型的那部分被称为类装载子系统. JAVA虚拟机有两种类装载器:启动类装载器和用户自定义类装载器.前者是JAVA虚拟机实现的一部分,后者则是Java程序 ...

  8. 把复选框变成单选框(prop,attr的区别)

    如果项目中需要统一样式的话,有可能会遇到把复选框变成单选框的需求. 下面是用jquery的简单实现 $(function(){ $("input[type='checkbox']" ...

  9. struts2上传下载

    struts上传下载必须引入两个jar文件: commons-fileupload-x.x.x.jar和comons-io-x.x.x.jar上传文件 import java.io.BufferedI ...

  10. Qt容器类的对象模型及应用(线性结构篇)(好多图,比较清楚)

    用Qt做过项目开发的人,肯定使用过诸如QList.QVector.QLinkList这样的模板容器类,它们虽然名字长的不同,但使用方法都大致相同, 因为其使用方法都大体相同,很多人可能随便拿一个容器类 ...