引入文件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. 【Knockout】一、认识Knockout,你会爱上它

    介绍 Knockout简称ko,是一个轻量级的javascript类库,采用MVVM设计模式(即Model.view.viewModel),简单优雅的实现了双向绑定,实时更新,帮助您使用干净的数据模型 ...

  2. MVC Model Binder

    这篇博客是借助一个自己写的工程来理解model binder的过程. MVC通过路由系统,根据url找到对应的Action,然后再执行action,在执行action的时候,根据action的参数和数 ...

  3. 每天一道LeetCode--119.Pascal's Triangle II(杨辉三角)

    Given an index k, return the kth row of the Pascal's triangle. For example, given k = 3,Return [1,3, ...

  4. edmbed system----ecos

    方案公司用的嵌入式系统用的就是开源的可配置系统, ecos 不过提到它,对方公司研究的并不透彻,它有一个可以配置的dhcp部分,也就是dns可以选择不分配给连接的客户端 不过对方公司不这个事,更不知道 ...

  5. C# winform滚动字幕

    private void timer1_Tick(object sender, EventArgs e)//用Timer来控制滚动速度 { label1.Left -= 2;//设置label1左边缘 ...

  6. Excel常用函数

    1.基本的算数函数 sum() average() 2.三角函数 sin() cos() 3.

  7. ZigBee 入网详解

    本文将根据Sniffer来详细解释ZigBee终端设备入网的整个流程,原创博文. 当协调器建立好网络后,终端设备执行zb_startrequest函数,准备入网时,他们两者之间详细的流程如下.

  8. [java学习笔记]java语言核心----面向对象基础

    1.面向对象概述 面向对象是java语言的核心.是对应于面向过程而言的. 面向过程:强调的是过程,即动作.在java中动作就是函数.C语言就是面向过程的. 如:把大象装进冰箱需要几步? 答:需要三步: ...

  9. 《Spring3.0就这么简单》

    第一章 认识Spring 1.Spring提供的IOC容器,是Spring大杀器之一.容器将对象之间的依赖关系交给Spring进行控制,采用配制的方式对依赖关系进行描述,由Ioc容器负责依赖类之间的创 ...

  10. MySQL EER反向建表

    Database > Synchronize Model... Choose Stored Connection Select the Schemata Choose which to upda ...