Js代碼
<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代碼:
<mce: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();
});
// --></mce:script>
下面是保存代碼
<mce: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();
}