引入文件jQuery、jquery.dragsort-0.5.2.min.js

html文件:

css文件:

ul { margin:0px; padding:0px; margin-left:20px; }
#uMenuSetting { list-style-type:none; margin:0px; }
#uMenuSetting li { float:left; padding:0px;margin-top:5px;}
.placeHolder div { background-color:white !important; border:dashed 1px white !important; }

js代码:

//elem.append(innerhtml);
$("#menus").append(innerhtml);
//拖动插件初始化
$("#uMenuSetting").dragsort({
dragSelector: "div .menu",
dragBetween: true,
dragEnd: saveOrder,
placeHolderTemplate: "<li class='placeHolder '><div></div> </li>"
});

//保存排序
function saveOrder() {
//var data = $("#list1 li").map(function () { return $(this).children().html(); }).get();
//var data = $("#uMenuSetting li").map(function () { return $(this).find('.menuKey').val(); }).get();

//for (var i = 0; i < data.length; i++) {
// data[i] = eval("(" + data[i] + ")");
// data[i].Sort = i;
//}
////调用ashx保存方法
//$.post("/MetaPortlet/EPP/PopularFunctions/View/PopularFunctionsHandler.ashx", { type: "order", PopularFunctions: JSON.stringify(data) }, function (data, statu) {
// if (statu == 'success') {
// if (data == 'false') {
// console.log("排序错误");
// } else {
// console.log("排序成功");
// }
// }
//});
};

dragsort拖动排序的更多相关文章

  1. 基于Metronic的Bootstrap开发框架经验总结(13)--页面链接收藏夹功能的实现2(利用Sortable进行拖动排序)

    在上篇随笔<基于Metronic的Bootstrap开发框架经验总结(12)--页面链接收藏夹功能的实现>上,我介绍了链接收藏夹功能的实现,以及对收藏记录的排序处理.该篇随笔主要使用功能按 ...

  2. 锋利的jQuery-7--query ui效果库--拖动排序插件sortable

    一个简单的拖动排序效果,具体请参看jQuery ui官网demo. jquery ui :http://jqueryui.com/ sortable例子:http://jqueryui.com/sor ...

  3. android可拖动排序GridView实现

    经常使用今日头条.网易新闻的同学们应该都会注意到用于管理多个频道的可拖动排序GridView,下面介绍一下可拖动的DragGridView的实现方法.代码放在GitHub上https://github ...

  4. Element-UI标签页el-tabs组件的拖动排序实现

    ElementUI的标签页组件支持动态添加删除,如下图: 但是这个组件不支持标签之间的拖动排序.那么我们自己怎样实现这个功能呢? 有一个叫vuedraggable的组件(https://github. ...

  5. RecyclerView-- 侧滑删除和拖动排序

    实现这么个功能我们不需要再去继承RecyclerView,只需要去了解ItemTouchHelper这个类即可,接下来我们就去看看都有些什么 ItemTouchHelper.Callback 默认需要 ...

  6. IOS UITableView拖动排序功能

    UITbableView作为列表展示信息,除了展示的功能,有时还会用到删除,排序等功能,下面就来讲解一下如何实现排序. 排序是当表格进入编辑状态后,在单元格的右侧会出现一个按钮,点击按钮,就可以拖动单 ...

  7. 隐藏 FastAdmin 列表中的拖动排序按钮

    隐藏 FastAdmin 列表中的拖动排序按钮 就是以下这个按钮,想先删除不要. 刚开始在 CMS 插件中的栏目中发现没有,以为在哪个位置中,但找到半天的 weigh 都没有找到weigh 的字眼. ...

  8. jquery 鼠标拖动排序Li或Table

    1.前端页面 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="拖动排序Li或Ta ...

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

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

随机推荐

  1. Servlet & JSP - getParameter 与 request.getAttribute 的区别

    getParameter 方法获取的是表单或 URL 的请求参数.参数是从 Web 客户端传递至 Web 服务端.例如有如下的 servlet: @WebServlet(name = "he ...

  2. SQL中CONVERT()函数用法详解

    SQL中CONVERT函数格式: CONVERT(data_type,expression[,style]) 参数说明: expression 是任何有效的 Microsoft® SQL Server ...

  3. 【oracle】oracle函数-数值函数

    一.数值函数 1. mod(m,n) 求余函数  注意:若m或者n为null,则返回null.若n为0,则返回m的值 eg:

  4. 【leetcode】363. Max Sum of Rectangle No Larger Than K

    题目描述: Given a non-empty 2D matrix matrix and an integer k, find the max sum of a rectangle in the ma ...

  5. [UNIX环境高级编程](第三版)中apue.h的问题

    编译 gcc -g myls.c 时,报错 ‘找不到头文件 apue.h’ apue.h是作者自己写的一个文件,系统不自带.其中包含了常用的头文件,以及出错处理函数的定义. 需要到 http://ww ...

  6. JAVA_SE复习(OOP2)

    面向对象编程(二) 一.static 关键字 静态属性 1.不能覆盖静态方法.要被覆盖的方法必须是非静态的.在继承链中具有相同方法名的两个静态方法是两个互相独立的类方法.调用子类的静态方法只是将父类的 ...

  7. alter和alert的一些问题

    今天在Java学习群里看到有人问:用alert能不能修改表结构?我第一反应是,alert是弹窗啊,怎么修改表结构?后来再看才知道,是那人打错了!我也晕了一下,还是记一下吧!alter是修改表结构的,a ...

  8. sublime text2之js压缩-Js Minifier

    一款基于Google Closure compiler压缩Js文件插件. 快捷键: Ctrl+Alt+M            当前文件内压缩Js代码(不推荐) Ctrl+Alt+Shift+M   ...

  9. php判断服务器是否支持Gzip压缩功能

    Gzip可以压缩网页大小从而达到加速打开网页的速度,目前主流的浏览器几乎都支持这个功能,但开启Gzip是需要服务器支持的,在这里我们简单的使用php来判断服务器是否支持Gzip功能. 新建一个php类 ...

  10. Spark Streaming揭秘 Day14 State状态管理

    Spark Streaming揭秘 Day14 State状态管理 今天让我们进入下SparkStreaming的一个非常好用的功能,也就State相关的操作.State是SparkStreaming ...