类似igoogle和mybaidu的jquery的sortable排序组件实现排序并保存状态的办法

2013-06-06 2 条评论 8,369 次阅读 被赞了 0 次
本文发布于：2013-06-06，最后更新于：2013-08-07，如果内容失效请留言告知。

jQuery的模块拖动插件Jquery sortable ，就是igoogle和my.baidu的那种效果，能拖动层，并保存。下次进来时还是保存后的。Jquery sortable使用很简单，只要设置了div的class为portlet 就能实现拖拽了。一部分代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<div class="demo">
 
  <div class="column"> 
 
   <div class="portlet"> 
    <div class="portlet-header">Feeds</div> 
    <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div> 
   </div> 
 
   <div class="portlet"> 
    <div class="portlet-header">News</div> 
    <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div> 
   </div> 
 
  </div>
 
  <div class="column"> 
 
   <div class="portlet"> 
    <div class="portlet-header">Shopping</div> 
    <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div> 
   </div> 
 
  </div>
 
  <div class="column"> 
 
   <div class="portlet"> 
    <div class="portlet-header">Links</div> 
    <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div> 
   </div> 
 
   <div class="portlet"> 
    <div class="portlet-header">Images</div> 
    <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div> 
   </div> 
 
  </div>
 
</div>

js代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script type="text/javascript"><!-- 
 $(function() { 
  $(".column").sortable({ 
   connectWith: '.column' 
  }); 
 
  $(".portlet").addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all") 
   .find(".portlet-header") 
    .addClass("ui-widget-header ui-corner-all") 
    .prepend('<span class="ui-icon-minusthick ui-icon"></span>') 
    .end() 
   .find(".portlet-content"); 
 
  $(".portlet-header .ui-icon").click(function() { 
   $(this).toggleClass("ui-icon-minusthick").toggleClass("ui-icon-plusthick"); 
   $(this).parents(".portlet:first").find(".portlet-content").toggle(); 
  }); 
 
  $(".column").disableSelection(); 
 }); 
 
// --></script>

下面是保存至 cookie 记录的代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<script type="text/javascript"><!-- 
function MadeDiv() 
{
  if (!$.cookie("dao_list")) { 
      $.cookie("dao_list", "c1:0@1@2@3@4@|c2:5@6@7@8@9@");  
  } 
  var list = $.cookie("dao_list");  
  var arrColumn = list.split('|'); 
   $.each(arrColumn, function(m, n) { 
      var elemId = n.split(':')[0];  
      var arrRow = n.split(':')[1] ? n.split(':')[1].split('@') : "";  
      $.each(arrRow, function(m, n) { 
          if (n) { 
              $("#" + elemId).append($("#dao_hang" + n).attr('id', n)) 
          } 
      }); 
   }) 
 
  $(".column").sortable({ 
  connectWith: '.column', 
  handle:'.portlet-header', 
  cursor: 'move', 
  stop:saveLayout 
  }); 
 
  $(".portlet").addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all") 
  .find(".portlet-header") 
  .addClass("ui-widget-header ui-corner-all") 
  .prepend('<span class="ui-icon ui-icon-closethick" title=/"点击删除导航/"></span>') 
  .end() 
  .find(".portlet-content"); 
 
  $(".portlet-header .ui-icon").click(function() { 
          var this_box=$(this).parent().parent().closest("div").remove(); 
          saveLayout(); 
  }); 
  $(".column").disableSelection(); 
  $( ".column" ).sortable( { forcePlaceholderSize: true } ); 
} 
function saveLayout() { 
    var list = ""; 
    $.each($(".column"), function(m) { 
        list += $(this).attr('id') + ":"; 
        $.each($(this).children(".portlet"), function(d) { 
            list += $(this).attr('id') + "@"; 
        }) 
        list += "|"; 
    }) 
    $.cookie("dao_list",list, {expires: 300}); 
} 
function moren() 
{ 
    $.cookie("dao_list","c1:0@1@2@3@4@|c2:5@6@7@8@9@", {expires: 300}); 
    window.location.reload(); 
} 
 
// --></script>

示例地址：http://www.lovewebgames.com/demo/sortable/sortable.html

官方示例地址：http://jqueryui.com/demos/sortable/

参考：

关于jquery中的sortable排序之后的保存状态的办法
http://www.lovewebgames.com/demo/sortable/

用Jquery UI Sortable与数据库实现div拖动（类似iGoogle）
http://www.ineyes.org/634-with-jquery-ui-sortable-drag-and-database-implementation-div-similar-to-igoogle

相关文章:

Default ThumbnailjQuery UI 主要组件使用中文文档参考 Default ThumbnailCSS3 box-shadow容器阴影效果示例 Default ThumbnailJsduck:前端文档生成利器Jsduck介绍及安装使用 Default Thumbnail设置博客/网站支持 Instant Pages 让 Chrome 浏览器瞬间打开下一页面 Default ThumbnailData URI scheme： base64 编码将代码、图片等小数据嵌入到网页显示 Default ThumbnailCSS 伪类选择器：如何使用 CSS3 伪类 Default ThumbnailCSS3 Media Queries:媒体设备的样式适应 Default ThumbnailWeb前端开发规范参考 Default Thumbnail那些过目不忘的无线端交互设计 Default Thumbnail可选择可编辑输入的下拉框功能模拟的实现 Default Thumbnail浏览器窗口/屏幕/网页的高度、宽度大小判断与获取 Default ThumbnailIframe 与 SameSite：Iframe 中设置 cookie 失败的原因及解决方案
点赞 (0)
知识共享许可协议
本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可
  1. tiandi说道：
    2013年06月7日 4:32 下午
    Google Chrome 28.0.1496.0 Google Chrome 28.0.1496.0 Windows 7 Windows 7

    官方那个DEMO要比上面那个样式好看很多。

    回复
  2. 海棠果说道：
    2013年06月6日 5:47 下午
    Google Chrome 21.0.1180.89 Google Chrome 21.0.1180.89 Windows 7 x64 Edition Windows 7 x64 Edition

    来学习了 不错 支持

    回复

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

Captcha Code