引入文件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. 前端开发中的一些chrome插件推荐

    这篇博客推荐的都是谷歌chrome浏览器插件,理论上,与之相同内核的浏览器都能使用.由于是谷歌插件,所以在天朝的网络,你懂的! 红杏 专为 学者 .程序员.外贸工作者 打造的上网加速器.我们相信,上网 ...

  2. 【ANT】ant概述

    ANT是集软件测试.编译.打包.部署等自动化构建工具,是Apache软件基金会JAKARTA目录中的一个子项目,具有以下优点: 跨平台性 ANT是由Java语言编写,具有很好的跨平台性. 操作简单 A ...

  3. 微信之Android各版本列表

    微信在不断地更新迭代,ios微信下载点击这里立即开始(手机电脑都可以,电脑端要安装iTunes),每个版本都放出一些新的功能或修复相关错误,详情可以点击下面的版本链接进行查看.(这里有Android微 ...

  4. CSS之导航菜单

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. iMAC——全新重装Mac系统

    在参考网上重装Mac系统教程的时候,感觉这篇教程挺不错: http://www.iplaysoft.com/osx-yosemite-usb-install-drive.html (此教程终端命令处需 ...

  6. Quartz 第三课 More About Jobs & JobDetails(官方文档翻译)

    当学完第二课之后,你欣喜的发现,让jobs工作起来是还是相当简单的.虽然让jobs运行起来很简单,对于其执行的关键内容还是需要知道的.它们是IJob接口中的Execute和JobDetails. 当你 ...

  7. simple_factory

    #include <stdlib.h> #include <iostream> using namespace std; class Product { public: vir ...

  8. PostgreSQL 8.1 中文文档

    PostgreSQL 8.1 中文文档 http://www.php100.com/manual/PostgreSQL8/

  9. wap手机端解决返回上一页,js

    <input id="hd_referrer" type="hidden" />                <a href="j ...

  10. python(三)一个文件读写操作的小程序

    我们要实现一个文件读写操作的小程序 首先我们有一个文件 我们要以"============"为界限,每一个角色分割成一个独立的txt文件,按照分割线走的话是分成 xiaoNa_1. ...