This plug in provides basic dragging capabilities for any HTML element. Interface of this class is similar to jquery.ui.draggable and if it is present will instead defer to the ui.draggable component.

The reasoning behind this plug in is that jquery.ui.draggable requires two extra script includes and it's sizable. This library makes extensive use of draggable behaviors so it was vital to have a self contained version that is interchangeable with the ui version. If jquery.ui is detetected this version is not used instead using the ui component.

$.fn.draggable = function(opt)

opt

A set of drag options. These options are a subset of the jquery.ui.draggable component to provide compatibility (with the exception of forceAbsolute).

opt = {  
   handle: null,
   opacity: 0.75,
   start: null;
   stop: null;
   dragDelay: 100,
   forceAbsolute:false
};

handle
An optional handle that is used for dragging so that only the handle element initiates dragging. This value is a jQuery selector and if not provided the entire base object becomes draggable.

opacity
The opacity while the element is being dragged to indicate drag state.

dragDelay
The time of delay before an the drag handle becomes draggable after the mouse is clicked. Avoids accidental dragging especially when clickable elements are in the dragged content. Note that all input and textarea and hyperlinks are not drag enabled.

forceAbsolute
If set forces the dragged element onto the body element of the page before being made absolute positioned. This can help in some situations where document nesting results in problems initial drag positioning (ie. inside of fieldsets or relative positioned content).

Once configure the control specified becomes draggable and can be moved around the page with a mouse. 

<div ID=DragPanel"  Class="blackborder greybackground" Width="400" DragHandleID="Header">
        <div id="Header" runat="server" class="gridheader">
        Panel 3
        </div>
        <div id="Content" style="padding:10px;">
        This is my content
        </div>
</div>

To make this panel and it's content draggable via script code:

<script type="text/javascript">
// Startup Script on bottom of page 
var DragPanel_Behavior = new wwDragBehavior("DragPanel","Header");
</script>