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

IsabelLionel · 发布于 2017-01-11 · 字数3467 · 浏览 859 · 评论 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 授权问说网发表,并经问说网编辑,转载请注明出处和 本文链接

相关文章

  • 2015-12-07TypeScript安装方法和中文快速入门教程指南
  • 2017-01-19用JavaScript实现给出的盒子的序列是否可连为一矩型
  • 2016-05-14太棒了!手把手教你用PS画一只逼真的眼睛
  • 2016-12-02Response JS创建高性能的支持移动设备的网站
  • 2016-05-15好货抢先看!Charlevoix beautiful字体免费下载
  • 2016-03-08CxImage优秀图像操作类库使用和简介
  • 2016-05-17AI精品教程!教你绘制一个高科技电源按钮
  • 2016-06-22FTP被动/主动模式介绍和FTP工具设置方法
  • 发布评论

    为您推荐

    问说网 · 发布于 2015-01-17

    编程能力和代码控制的能力

    你应该知道,真正的编程能力不是使用轮子的能力( 即不是复用能力),而是将现实问题用编程语言来解决的能力(这就需要你具备设计能力,即很强的代码控制能力,能把现实问…

    问说网 · 发布于 2015-12-25

    在HTML5浏览器上使用Audio和Video标签

    HTML5给我们带来了很多惊喜,其中新增加的Audio和Video标签可以让我们更方便的在网页中播放音频和视频,上篇文章中给大家了使用Html5Media兼容所…

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

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

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

    问说网 · 发布于 2016-12-02

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

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

    问说网 · 发布于 2016-03-17

    一个非必现问题的定位和反思

    在启动监测的时候需要填充userNum和userIns信息来通知底层启动监测的用户。但停止监测需求就是停止所有用户,只需要发送停止监测消息给底层,底层会停止所有…

    过目不忘!25个让你爱不释手的水平滚动网站

    朋友们!今天CYHD和大家一起来欣赏这25个独特个性的水平滚动网站,现在绝大部分网站是垂直下拉式,我们也已经使用习惯。那么如果你想让网站与众不同,独特个性,让浏…

    • 过目不忘!25个让你爱不释手的水平滚动网站
    • 过目不忘!25个让你爱不释手的水平滚动网站
    • 过目不忘!25个让你爱不释手的水平滚动网站
    • 过目不忘!25个让你爱不释手的水平滚动网站
    HudsonSpring · 发布于 2016-05-14 · 浏览 960 · 评论 0

    萌萌哒!教你用AI绘制一只打坐的可爱奶牛

    如果您想了解Adobe Illustrator里一些简单的着色技术,那就跟我一起学习这个有趣又引人深思的教程吧。我们要使用网格工具绘制一头在绿草地上盘腿打坐的可…

    • 萌萌哒!教你用AI绘制一只打坐的可爱奶牛
    • 萌萌哒!教你用AI绘制一只打坐的可爱奶牛
    • 萌萌哒!教你用AI绘制一只打坐的可爱奶牛
    • 萌萌哒!教你用AI绘制一只打坐的可爱奶牛
    MatthewMag · 发布于 2016-05-14 · 浏览 947 · 评论 0
    好货抢先看!Charlevoix beautiful字体免费下载
    ConnieMarian · 发布于 2016-05-15

    好货抢先看!Charlevoix beautiful字体免费下载

    朋友们,这是一个美丽的字体。它是强大的,大胆的和波浪状是一道亮丽的风景。其略显圆润的边角提醒我们其中字母从来没有锋利的边缘。它拥有230精心制作的字形。我们提供…

    问说网手机版

    躺着 站着 跪着轻松访问

    更多详情 关于作者

    IsabelLionel

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

    89 文章
    0 评论
    人气

    更多 热门话题

    APP界面

    关注 APP界面

    文章 41506 · 浏览 2474

    APP欣赏

    关注 APP欣赏

    文章 41427 · 浏览 2327

    APP手机界面

    关注 APP手机界面

    文章 41417 · 浏览 2376

    图片素材

    关注 图片素材

    文章 29463 · 浏览 1864

    高清图片

    关注 高清图片

    文章 26530 · 浏览 2032

    更多 推荐作者

    关注 秋天的孤寂

    文章 99 · 评论 0

    关注 怎麽继续

    文章 90 · 评论 2

    关注 溫柔的溫柔

    文章 91 · 评论 0

    关注 走了留下什么

    文章 110 · 评论 0

    关注 莪很迷茫

    文章 97 · 评论 0

    关注 思念像咒语

    文章 102 · 评论 0

    
    顶部 反馈 评论 底部

    意见反馈

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

    您的反馈我们已收到!

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