dragsort拖动排序
引入文件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拖动排序的更多相关文章
- 基于Metronic的Bootstrap开发框架经验总结(13)--页面链接收藏夹功能的实现2(利用Sortable进行拖动排序)
在上篇随笔<基于Metronic的Bootstrap开发框架经验总结(12)--页面链接收藏夹功能的实现>上,我介绍了链接收藏夹功能的实现,以及对收藏记录的排序处理.该篇随笔主要使用功能按 ...
- 锋利的jQuery-7--query ui效果库--拖动排序插件sortable
一个简单的拖动排序效果,具体请参看jQuery ui官网demo. jquery ui :http://jqueryui.com/ sortable例子:http://jqueryui.com/sor ...
- android可拖动排序GridView实现
经常使用今日头条.网易新闻的同学们应该都会注意到用于管理多个频道的可拖动排序GridView,下面介绍一下可拖动的DragGridView的实现方法.代码放在GitHub上https://github ...
- Element-UI标签页el-tabs组件的拖动排序实现
ElementUI的标签页组件支持动态添加删除,如下图: 但是这个组件不支持标签之间的拖动排序.那么我们自己怎样实现这个功能呢? 有一个叫vuedraggable的组件(https://github. ...
- RecyclerView-- 侧滑删除和拖动排序
实现这么个功能我们不需要再去继承RecyclerView,只需要去了解ItemTouchHelper这个类即可,接下来我们就去看看都有些什么 ItemTouchHelper.Callback 默认需要 ...
- IOS UITableView拖动排序功能
UITbableView作为列表展示信息,除了展示的功能,有时还会用到删除,排序等功能,下面就来讲解一下如何实现排序. 排序是当表格进入编辑状态后,在单元格的右侧会出现一个按钮,点击按钮,就可以拖动单 ...
- 隐藏 FastAdmin 列表中的拖动排序按钮
隐藏 FastAdmin 列表中的拖动排序按钮 就是以下这个按钮,想先删除不要. 刚开始在 CMS 插件中的栏目中发现没有,以为在哪个位置中,但找到半天的 weigh 都没有找到weigh 的字眼. ...
- jquery 鼠标拖动排序Li或Table
1.前端页面 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="拖动排序Li或Ta ...
- sortable结合angularjs实现拖动排序
记录拖动排序 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...
随机推荐
- Tomcat - 持久化 Session
Session 是保存在内存中的,如果服务器重启.宕机的话,Session 就会丢失.有时候,我们需要对 Session 持久化以应对意外的情况发生.例如,客户端与服务器在交互过程中,可能因为 Ses ...
- Swift闭包(Closure)
语法: { (parameters) ->return type in statements} 实例:采用函数实现: let names =["Chris", "A ...
- C#判断Textbox是否为数字
第一种方法: try { ) { //操作代码 } else { MessageBox.Show("必须是正整数"); } } catch (FormatException) { ...
- OC1_类方法的内存管理
// // Dog.h // OC1_类方法的内存管理 // // Created by zhangxueming on 15/6/19. // Copyright (c) 2015年 zhangxu ...
- nodejs包管理
包管理 :npm cnpm yarn Node Package Manager node的包管理工具 cls清除控制台 npm install jquery 下载依赖包 就自动下载最新版本的jq np ...
- 查看cpu、内存和硬盘
查看cpu cat /proc/cpuinfo 查看内存 top free -m 按兆为单位输出内存的已用,未用,总共等结果 cat /proc/meminfo |grep MemTotal 查看硬盘 ...
- TIMAC 学习笔记(三)
本文主要内容参考 <Security on TI IEEE 802.15.4 Compliant RF Devices>.<Design Note DN108>.<IEE ...
- 完美高仿精仿京东商城手机客户端android版源码
完美高仿精仿京东商城手机客户端android版源码,是从安卓教程网那边转载过来的,这款应用源码非常不错的,也是一个非常优秀的应用源码的,希望能够帮到学习的朋友. _js_op> <igno ...
- 多项分布(multinominal distribution)
简介 更一般性的问题会问:“点数1~6的出现次数分别为(x1,x2,x3,x4,x5,x6)时的概率是多少?其中sum(x1~x6)= n”.这就是一个多项式分布. 定义 把二项分布推广至多个(大于2 ...
- javascript多线程简介
讲多线程之前,我们先了解一下JS的事件机制 浏览器运行时,脚本必须定期让位给UI进程进行来维持网页的响应,闲置太长时间的脚本可能会被浏览器当成失控脚本,进而造成假死或弹窗 事件触发的设计javascr ...