Googles home page: how did they do it.

**Chrisms** · 08-18-2008, 06:21 AM

Hey, I'm at a loose for what to search for.. I'm trying to finish up a website project, and as part of my admin. tools i'd like to code in drag and drop like you see on google's "igoogle" home page.

I'm at a loose for how to do this...

anyone help is appreciated,

Thanks,
Chris

Jaan · 08-18-2008, 06:55 AM

it's ajax or dhtml or javascript

Prototype Window Examples

**Xav** · 08-18-2008, 11:55 AM

Neat site! +rep

**fadiodeh** · 09-21-2008, 04:54 PM

hi

i found this maybe help you, sorry i copy/paste it ..... i dont have authority to put links here

Floating (Movable) Web Part Task Pane

The task pane that appears when you edit a web part seems to have an uncanny knack for the devastation of your finely-tuned page layouts and master pages. SharePoint wraps everything in a massive table and plops the task pane somewhere to the right of your overall design; I've found this often means users have to scroll horizontally to view the entire web page. I don't know what it is about horizontal scrolling…maybe it's the fact that most computer mice have only a vertical scroll-wheel…but I do know that in web design, horizontal scrolling is a "no-no." It seems to invoke emotions ranging everywhere from fear to utter rage.

Wouldn't it be nice if you could "float" the task pane, allowing users to move it around the screen without altering the layout of the page? At first, I thought this wasn't possible because you can't really attach an "onclick" event to this element – it's called from somewhere within the depths of the inner-workings of SharePoint…not my favorite place to start opening files and changing code and markup. Fortunately, there is a safer solution.

I happened upon this great cross-browser script that allows you to attach javascript dragging events to any element on the page, using only it's "ID" field. The only trouble that I had implementing this into SharePoint is that you have to circumvent the out-of-the-box <body onload="…"> tag. This is easy enough with a little change to your master page. Think of it as a javascript "detour," so to speak.

1. Download "dom-drag.js" from the website mentioned above
2. Upload this script somewhere on your server
3. Open your master page in SharePoint Designer 2007
4. Find the line in your master page that begins with <body onload="javascript:_spFormOnSubmitWrapper();">
5. Replace this line with the following code: <body onload="javascript:loadDragElements();">
6. In the <head> section of your master page, add the following code:

# Note: Ensure that the path to your 'dom-drag.js' is correct.

7. Add this code to your default CSS file:

/* float web part panel */
.ms-ToolPaneOuter { position: absolute; height: 80% !important; border: 2px #6f9dd9 solid; top: 0; left: 0; }
td#MSOTlPn_MainTD { width: 0 !important; }
td#MSOTlPn_ToolPaneCaption { cursor: move; }

Viola! Sweet, floating goodness. Notice that we moved the "_spBodyOnLoadWrapper();" event into our custom onload event. This allows us to call the event as normal, but also to add our own custom onload javascript. The CSS basically hides the right-hand column and then "floats" the task pane by giving it an absolute position within the page. You can adjust the "top" and "left" values to make the task pane appear anywhere within the window.

Source : Thesug ORG