类似igoogle和mybaidu的jquery sortable 插件

最近想用Jquery sortable 做个导航站,实现里面的拖拽,隐藏、显示模块等功能。

 

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

 

<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代码:

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

下面是保存代码

 


    <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});
}

//恢复默认的js
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.aquna.com/0518/html1/jquerysortable.html 


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

阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭