共计 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
正文完