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 ...
随机推荐
- 前端开发中的一些chrome插件推荐
这篇博客推荐的都是谷歌chrome浏览器插件,理论上,与之相同内核的浏览器都能使用.由于是谷歌插件,所以在天朝的网络,你懂的! 红杏 专为 学者 .程序员.外贸工作者 打造的上网加速器.我们相信,上网 ...
- 【ANT】ant概述
ANT是集软件测试.编译.打包.部署等自动化构建工具,是Apache软件基金会JAKARTA目录中的一个子项目,具有以下优点: 跨平台性 ANT是由Java语言编写,具有很好的跨平台性. 操作简单 A ...
- 微信之Android各版本列表
微信在不断地更新迭代,ios微信下载点击这里立即开始(手机电脑都可以,电脑端要安装iTunes),每个版本都放出一些新的功能或修复相关错误,详情可以点击下面的版本链接进行查看.(这里有Android微 ...
- CSS之导航菜单
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- iMAC——全新重装Mac系统
在参考网上重装Mac系统教程的时候,感觉这篇教程挺不错: http://www.iplaysoft.com/osx-yosemite-usb-install-drive.html (此教程终端命令处需 ...
- Quartz 第三课 More About Jobs & JobDetails(官方文档翻译)
当学完第二课之后,你欣喜的发现,让jobs工作起来是还是相当简单的.虽然让jobs运行起来很简单,对于其执行的关键内容还是需要知道的.它们是IJob接口中的Execute和JobDetails. 当你 ...
- simple_factory
#include <stdlib.h> #include <iostream> using namespace std; class Product { public: vir ...
- PostgreSQL 8.1 中文文档
PostgreSQL 8.1 中文文档 http://www.php100.com/manual/PostgreSQL8/
- wap手机端解决返回上一页,js
<input id="hd_referrer" type="hidden" /> <a href="j ...
- python(三)一个文件读写操作的小程序
我们要实现一个文件读写操作的小程序 首先我们有一个文件 我们要以"============"为界限,每一个角色分割成一个独立的txt文件,按照分割线走的话是分成 xiaoNa_1. ...