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

8,701次阅读
2 条评论

共计 3187 个字符,预计需要花费 8 分钟才能阅读完成。

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>

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

<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

正文完
 0
任侠
版权声明:本站原创文章,由 任侠 于2013-06-06发表,共计3187字。
转载说明:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
评论(2 条评论)
验证码
tiandi 评论达人 LV.1
2013-06-07 16:32:41 回复
Google Chrome 28.0.1496.0 Google Chrome 28.0.1496.0 Windows 7 Windows 7

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

 Windows  Chrome  内网IP
海棠果 评论达人 LV.1
2013-06-06 17:47:22 回复
Google Chrome 21.0.1180.89 Google Chrome 21.0.1180.89 Windows 7 x64 Edition Windows 7 x64 Edition

来学习了 不错 支持

 Windows  Chrome  内网IP