jquery中的sortable排序之后的保存状态的解决方法

IsabelLionel · 发布于 2017-01-11 · 字数3467 · 浏览 1054 · 评论 0

当时也就从jquery的官方网站上抄了几句搞上去,后来发现用处不大,还挺慢。汗~~~以至于到今天早上也没搞清楚怎么样才能把排序后的结果保存起来,正好现在公司要做一个这样的功能,就又从新学习了下。
首先,在jquery的官方demo(http://jqueryui.com/demos/)上找到了相似的代码。我所要的叫就是portlets(http://jqueryui.com/demos/sortable/portlets.html)这种效果。就像igoogle首页那样的。冒似很简单,把要引用的js都加入后,然后几行代码就完事了。

代码如下:

<script type=”text/javascript”>
$(function() {
$(“.column”).sortable({
connectWith: ‘.column’
});
});
</script>

html代码省略…详情请查看演示

写完这些之后,你就可以试着拖拽了。有没有觉得很有成就感?不错,小伙子,有前途。sortable 有许多的参数,详细的自己去官网上看吧!只说下这里的connectWith:’.column’是什么意思,它就是说,凡是class为column的,它都可以把一个column的portlet拖到另一个column里去。试试你就知道了。当然今天的重点并不是怎么样去拖拽它,而是拖拽之后刷新还保存着当时的顺序。

遇到点小困难了,不过那也得上啊,不然以后都被女孩子肯嫁给你!^_^ 于是乎我就开始google百度了。有人说用sortable的serialize方法可以得到一个ID数组,可惜,我确实没有得到。如果你做到了也请你tell me 一下;还有人说用toArray方法也可以得到ID数组.这次也确实得到了。不过非常令人讨厌的事发生了。

$(‘.column’).sortable(‘toArray’);

这样也只能得到第一个class是column里的ID数组.用each()? I tried, but not work;可能你能做到,也请你告诉我吧!所以只能转走其他方法了。或许你会说,这还不简单么,直接把整个网页的布局存起来不就OK了?哈哈,I also think so!通过iedeveloper调试工具发现,它们拖动之后发现了改变,变的不是样式,而是div的先后顺序。如果我把整个内容保存起来的话,似乎也行得通,不过量就有点大了,也不适于动态的内容。怎么办呢,于是我就想着只存它们的ID顺序不就O了吗?于是我又给它们每人一个ID了。

万事开头难,有了这个思路了之后,你是否已经厕所打开了呢?我先去下便下,谢谢开门,马上回来!

接下来就一步步按照这个思路来吧。首先是获取到所有的column.

$.each($(“.column”), function(m) {}

再找每个column下的portlet;

$.each($(“.column”), function(m) {
$.each($(this).children(“.portlet”), function(d) {
}

接着就是把它们按自己的方式存起来。

代码如下:

function saveLayout(){
var list = “”;
$.each($(“.column”), function(m) {
list += $(this).attr(‘id’) + “:”;
$.each($(this).children(“.portlet”), function(d) {
list += $(this).attr(‘id’) + “@”;
})
list += “|”;
})
$.cookie(“list”, list)}

这里还用到了另一组件jquery.cookie

改下开始的

代码如下:

$(“.column”).sortable({
connectWith: ‘.column’,
stop: saveLayout
});

stop是指拖拽结束后触发的事件.

最后就是按顺序读到容器里去,这里我就不多说了,只可意会,不能言传哈。贴代码吧:

代码如下:

var list = $.cookie(“list”); //获取cookie里的list值
//alert(list)
var arrColumn = list.split(‘|’);
$.each(arrColumn, function(m, n) {
var elemId = n.split(‘:’)[0]; //容器ID
var arrRow = n.split(‘:’)[1] ? n.split(‘:’)[1].split(‘@’) : “”; //单个序列ID
$.each(arrRow, function(m, n) {
if (n) {//排除空值
$(“#” + elemId).append($(“#sb” + n).attr(‘id’, n))//把序列填加进容器
}
});
})

好了,今天就这样吧,打字排版花了我一个小时了,公司给我的是一小时16块RMB。所以BYE!
如果你有任何的问题,都不要来问我,我很忙。到QQ群5678537里找其他人探讨吧!

演示代码http://demo.poluoluo.com/js/Sortable/Sortable.htm

本文系作者 IsabelLionel 授权问说网发表,并经问说网编辑,转载请注明出处和 本文链接

相关文章

  • 2017-01-19用JavaScript实现给出的盒子的序列是否可连为一矩型
  • 2016-12-02FlyJSONP轻量级的跨域AJAX请求插件
  • 2016-05-13判定被7整除的简易方法
  • 2016-12-02Response JS创建高性能的支持移动设备的网站
  • 2016-05-15超实用!如何打造一个非凡且有趣的响应式设计
  • 2016-05-19jQuery.superLabels输入框文本动画提示插件
  • 2016-05-23Photoshop绘制一枚通透质感的游戏按钮
  • 2016-05-25快乐触手可及欢乐斗地主设计分享
  • 发布评论

    为您推荐

    问说网 · 发布于 2015-06-06

    SVG动画的载体[译]

    这是近2014、十五年前的W3C开始开发一个基于网络的可缩放矢量图形(SVG)格式。随着Web技术去,这是一个很旧的、根深蒂固的技术,今天这篇文章将介绍一下SV…

    用JavaScript实现给出的盒子的序列是否可连为一矩型
    AustenJuliet · 发布于 2017-01-19

    用JavaScript实现给出的盒子的序列是否可连为一矩型

    by cpglkg <script>var arr=[5,10,15];function rect(arr,width){ arr.sort(fun…

    开始使用Skeleton前端开发框架入门教程

    在这篇文章中,我将向你介绍这个轻量级的CSS框架。我会给它一个简短的介绍,介绍其主要特点。然后我会告诉你如何使用它在一个真实的项目,这将是基于一个演示页我已经建…

    • 开始使用Skeleton前端开发框架入门教程
    • 开始使用Skeleton前端开发框架入门教程
    • 开始使用Skeleton前端开发框架入门教程
    • 开始使用Skeleton前端开发框架入门教程
    问说网 · 发布于 2016-03-05 · 浏览 1855 · 评论 0
    问说网 · 发布于 2016-12-02

    FlyJSONP轻量级的跨域AJAX请求插件

    FlyJSONP是一个JavaScript库,用于实现跨域GET和POST请求服务,支持JSONP,并取得一个JSON格式的数据响应,这个Library具有易于…

    SQLite数据库页面结构分析

    数据库中第一个页是Btree页。第一个页面的前100个字节是一个对数据库文件进行描述的“文件头”,通过对应关系可以获得“包括数据库的版本、格式的版本、页大小、编…

    • SQLite数据库页面结构分析
    • SQLite数据库页面结构分析
    • SQLite数据库页面结构分析
    • SQLite数据库页面结构分析
    问说网 · 发布于 2016-03-11 · 浏览 1333 · 评论 0
    图灵智能机器人API接入文档
    问说网 · 发布于 2016-04-07

    图灵智能机器人API接入文档

    图灵机器人 API 是在人工智能的核心能力(包括语义理解、智能问答、场景交互、知 识管理等)的基础上,为广大开发者、合作伙伴和企业提供的一系列基于云计算和大数据…

    在Photoshop中创建逼真泼水文字效果

    创建一个新的文件大小940px * 700像素,用黑色填充背景层。加载湖水图片到Photoshop中,然后使用套索工具并设置羽化为40px,绘制一个选区的湖水部…

    • 在Photoshop中创建逼真泼水文字效果
    • 在Photoshop中创建逼真泼水文字效果
    • 在Photoshop中创建逼真泼水文字效果
    • 在Photoshop中创建逼真泼水文字效果
    问说网 · 发布于 2016-04-19 · 浏览 1378 · 评论 0

    太棒了!手把手教你用PS画一只逼真的眼睛

    人类的眼睛结构和组成构造都是相似的:椭圆结构、两边尖削,有眼睑、眼睫和眉毛。很容易就能画出一只易辨认的眼睛,今天CYHD和大家一起来学习如何画出逼真的眼睛吧~

    • 太棒了!手把手教你用PS画一只逼真的眼睛
    • 太棒了!手把手教你用PS画一只逼真的眼睛
    • 太棒了!手把手教你用PS画一只逼真的眼睛
    • 太棒了!手把手教你用PS画一只逼真的眼睛
    莫荻 · 发布于 2016-05-14 · 浏览 1070 · 评论 0

    问说网手机版

    躺着 站着 跪着轻松访问

    更多详情 关于作者

    IsabelLionel

    这个人比较懒,什么都没有填写!

    89 文章
    0 评论
    人气

    更多 热门话题

    APP界面

    关注 APP界面

    文章 41506 · 浏览 3203

    APP欣赏

    关注 APP欣赏

    文章 41427 · 浏览 2958

    APP手机界面

    关注 APP手机界面

    文章 41417 · 浏览 3079

    图片素材

    关注 图片素材

    文章 29463 · 浏览 2488

    高清图片

    关注 高清图片

    文章 26530 · 浏览 2700

    更多 推荐作者

    关注 秋末残雪

    文章 106 · 评论 0

    关注 秋天的孤寂

    文章 99 · 评论 0

    关注 惢碎葬爱

    文章 96 · 评论 0

    关注 怎麽继续

    文章 90 · 评论 2

    关注 倾听寂寞

    文章 83 · 评论 0

    关注 溫柔的溫柔

    文章 91 · 评论 0

    
    顶部 反馈 评论 底部

    意见反馈

    感谢您对问说网的支持,提出您在使用过程中遇到的问题或宝贵建议,您的反馈对我们产品的完善有很大帮助。

    您的反馈我们已收到!

    感谢您提供的宝贵意见,我们会在1-2个工作日,通过您留下的联系方式将处理结果反馈给您!