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

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

相关文章

  • 2016-12-02FlyJSONP轻量级的跨域AJAX请求插件
  • 2016-03-17CodePress基于JavaScript语法高亮编辑器插件
  • 2016-05-02FileReader.js在浏览器中读取文件信息
  • 2016-12-02Response JS创建高性能的支持移动设备的网站
  • 2016-05-15品质好货!Wonder App UI Kit PSD免费下载
  • 2016-05-16受益匪浅!2015年12个PC网页UI设计新趋势
  • 2016-05-17梦寐以求!如何使用PS打造唯美的梦幻仙女
  • 2016-05-17聊聊设计的初心为什么本真的设计很重要?
  • 发布评论

    为您推荐

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

    ECMAScript6新特性介绍和示例方法

    目前想要运行ES6代码的话,可以用google/traceur-compiler将代码转译。点此访问traceur-compiler 在线版本时实编辑ES6代码…

    用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-18

    Unveil.js基于jQuery轻量级的图片懒加载插件

    Unveil.js是一个图片懒加载(延迟加载)的JavaScript插件,可以基于jQuery或者Zepto.js使用,支持现代浏览器及IE7+,Github上…

    BxCarousel基于jQuery图片滚动插件
    问说网 · 发布于 2016-06-13

    BxCarousel基于jQuery图片滚动插件

    BxCarousel是一个基于jQuery图片滚动/幻灯片插件,插件可自定义很多参数,实现图片元素的左右/上下滑动,使用简单方便,轻量级的jQuery幻灯片插件…

    FTP被动/主动模式介绍和FTP工具设置方法

    问说网的服务器默认开启了防火墙设置,只允许了80和21端口,发现FTP无法链接到服务器了,通过网上查找说是21端口只是进行用户验证,20端口才是传输数据,于是有…

    • FTP被动/主动模式介绍和FTP工具设置方法
    • FTP被动/主动模式介绍和FTP工具设置方法
    • FTP被动/主动模式介绍和FTP工具设置方法
    • FTP被动/主动模式介绍和FTP工具设置方法
    问说网 · 发布于 2016-06-22 · 浏览 1046 · 评论 0
    jQuery Scroll Path按路径元素滚动动画插件
    问说网 · 发布于 2016-07-02

    jQuery Scroll Path按路径元素滚动动画插件

    jQuery Scroll Path是一个jQuery的滚动路径插件,可以让你自定义滚动路径。该插件是使用canvas flavored的语法来绘制路径,并且支…

    Java异常处理
    Vincent · 发布于 2016-07-06

    Java异常处理

    异常类 Throwable类是 Java 语言中所有错误(Error)或异常(Exception)的超类 异常处理 异常声明(消极) 异常声明使用关键字thro…

    问说网手机版

    躺着 站着 跪着轻松访问

    更多详情 关于作者

    IsabelLionel

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

    89 文章
    0 评论
    人气

    更多 热门话题

    APP界面

    关注 APP界面

    文章 41506 · 浏览 1900

    APP欣赏

    关注 APP欣赏

    文章 41427 · 浏览 1828

    APP手机界面

    关注 APP手机界面

    文章 41417 · 浏览 1837

    图片素材

    关注 图片素材

    文章 29463 · 浏览 1321

    高清图片

    关注 高清图片

    文章 26530 · 浏览 1529

    更多 推荐作者

    关注 惢碎葬爱

    文章 96 · 评论 0

    关注 倾听寂寞

    文章 83 · 评论 0

    关注 溫柔的溫柔

    文章 91 · 评论 0

    关注 走了留下什么

    文章 110 · 评论 0

    关注 流浪的脚步

    文章 86 · 评论 0

    关注 籹孒不认输

    文章 94 · 评论 0

    顶部 反馈 评论 底部

    意见反馈

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

    您的反馈我们已收到!

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