From b6fceadff4d3d4704a5b0b6c88b8ae7886f2e43e Mon Sep 17 00:00:00 2001 From: devin Date: Mon, 30 Apr 2012 06:41:05 +0800 Subject: [PATCH] column group experiment --- app/assets/javascripts/orbitdesktop.js | 153 +++++++++++++++---------- app/assets/stylesheets/desktopmain.css | 18 +-- 2 files changed, 102 insertions(+), 69 deletions(-) diff --git a/app/assets/javascripts/orbitdesktop.js b/app/assets/javascripts/orbitdesktop.js index 9bdacd51..1977fcb3 100755 --- a/app/assets/javascripts/orbitdesktop.js +++ b/app/assets/javascripts/orbitdesktop.js @@ -135,63 +135,48 @@ var orbitDesktop = function(dom){ o.currenthtml = target; o.currentface = "home"; - var extraspace = 300; - var currentElement, elementParent, targetParent, tempElement, widthcheck; - widthcheck = false; var bindHandlers = function(){ // this function will bind all the handlers in the desktop - var groupWrapperWidth = 0; - var groupWrapperHeight = 0; - $('div#desktop div.group').width(528); - $("div#desktop .element").mousedown(function(){ - currentElement = $(this); - elementParent = $(this).parent(); - }) - $("div#desktop .group").mouseenter(function(){ - targetParent = $(this); - }) - $("div#desktop .group").each(function(){groupWrapperWidth+=$(this).width();}) - groupWrapperWidth+=200; - groupWrapperHeight = $(".group").height() + 20; - // groupWrapperHeight = (groupWrapperHeight > ($(window).height()-extraspace))? $(window).height()-extraspace:groupWrapperHeight; + var groupWrapperWidth = 0; + $("div#desktop .group").each(function(){groupWrapperWidth+=$(this).outerWidth(true);}); $("div#desktop #group_wrapper").css("width",groupWrapperWidth); - var first = true; - $("div#desktop .grp").sortable({ - connectWith: ".grp", + $("div#desktop .g_col").sortable({ + connectWith: ".g_col", tolerance: 'pointer' , - revert:true, + revert: 300, + containment: '#group_wrapper', + helper: 'clone', stop:function(){ - o.tp = targetParent.height(); - var currentElementWidth = currentElement.width(); - var targetElementWidth = targetParent.width(); - if(targetParent.height()>540){ - //targetParent.width(currentElement.width()); - var newWidth = targetElementWidth+currentElementWidth; - targetParent.css("max-width",newWidth); - var newParentWidth = $("div#desktop #group_wrapper").width()+currentElementWidth; - $("div#desktop #group_wrapper").css("width",newParentWidth); - }else if(targetParent.height()<540){ - var newWidth = targetElementWidth - (540-targetElementWidth); - targetParent.css("max-width",newWidth); - var newParentWidth = $("div#desktop #group_wrapper").width()+currentElementWidth; - $("div#desktop #group_wrapper").css("width",newParentWidth); - } - first = true; + var newpostitions = new Array; + var groupids = new Array; + $.each($("div#desktop .group"),function(i,grp){ + var groupone = new Array; + groupids.push($(grp).attr("id")); + $ul = $(grp).find(".g_col .element"); + $.each($ul,function(){ + groupone.push($(this).attr("id")); + }) + newpostitions.push(groupone); + }); + $.post("/desktop/newpositions",{"sectionid":o.sectionId,"newpos":newpostitions,"groupids":groupids}); }, update:function(){ - if(first){ - first = false; - var newpostitions = new Array; - var groupids = new Array; - $.each($("div#desktop .group"),function(i,grp){ - var groupone = new Array; - groupids.push($(grp).attr("id")); - $ul = $(grp).find("ul.grp li"); - $.each($ul,function(){ - groupone.push($(this).attr("id")); - }) - newpostitions.push(groupone); - }); - $.post("/desktop/newpositions",{"sectionid":o.sectionId,"newpos":newpostitions,"groupids":groupids}) + var s = $(this).find('.element').length, + last = $(this).find('.element').eq(s-1).position(), + lasth = $(this).find('.element').eq(s-1).outerHeight(true); + + if ((last.top+lasth)>528){ + $(this).sortable('cancel'); + } + + }, + receive: function(event, ui){ + + var s = $(this).find('.element').length, + last = $(this).find('.element').eq(s-1).position(), + lasth = $(this).find('.element').eq(s-1).outerHeight(true); + + if ((last.top+lasth)>528){ + $(ui.sender).sortable('cancel'); } } }); @@ -222,7 +207,17 @@ var orbitDesktop = function(dom){ var opacity = ["op05","op06","op07","op08","op09"]; $.each(groups,function(i,group){ group.sort(o.sortJSON("position",true,parseInt)); - var $group = $('
'); + // var $group = $('
'), + var colindex = 0, + $group = $('
'), + $col = $('