类似igoogle和mybaidu的jquery sortable 插件

最新推荐文章于 2025-08-11 17:32:08 发布

原创最新推荐文章于 2025-08-11 17:32:08 发布 · 805 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #class #portlet #function #div #list

本文介绍了如何利用jQuerysortable插件实现导航站中元素的拖拽、隐藏与显示功能。通过简单的代码示例，演示了如何设置div类名和编写js代码来达到目标效果，并提供了保存布局状态的功能，使得用户下次访问时依然保持上次的布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

<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="portlet">
<div class="portlet-header">Shopping</div>
<div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>

</div>

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

js代码：

$(".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>

下面是保存代码

  $(".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/