Floating (Movable) Web Part Task Pane

Floating (Movable) Web Part Task Pane

The following script will allow 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 tag. This is easy enough with a little change to your master page.

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

5. Replace this line with the following code:

6. In the section of your master page, add the following code:




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; }

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.