draggable jQuery Plugin

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)


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,

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.

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

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.

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 id="Content" style="padding:10px;">
        This is my content

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");


It's best that elements are already defined as position: absolute in the document. It's also recommended that the draggable element is defined at the highest document level (inside body or form) to minimize occasional formatting and offset oddities.

< input>, < textarea> and < a> elements cannot be dragged.

Class Members

See also:

Class wwDragBehavior

© West Wind Technologies, 1996-2022 • Updated: 12/19/15
Comment or report problem with topic