jqDnR is a lightweight plugin for jQuery that lets you drag, drop, and resize elements.

Features;

• Drag + Drop Element Posistioning
 
• South East Resizing
• Definable Drag and Resize "handles"
• Translucent Dragging, Preservation of Original Opacity

I wrote jqDnR to compliment jqModal elements, allowing drag+resize functionality while remaining true to the plugin's minimalistic architecture. jqDnR provides the all the basic elastic functionality most dialogs will need. For those seeking a full-featured solution, see Interface Elements for jQuery. 

If you like jqDnR, please consider a dontation to support its development:

Download the Plugin (jqDnR.js - 972 bytes)

Download the Dimensions Plugin (dimensions.js) [OPTIONAL] - If detected, the dimensions plugin by Brandon Aaron  will be used to alleviate Internet Explorer "jumpiness" with elements that have fixed or percentage based position.

  [file sizes reflect uncompressed source with header removed]

If you need support or have comments, please post to the jQuery mailing list.

IMPORTANT; If an element is to be resized or dragged, it MUST have its positioning set to ABSOLUTE, RELATIVE, or FIXED.

Examples

$().ready(function() {  $('#ex1').jqResize('.jqResize');});

.jqHandle {   background: red;   height:15px;}.jqDrag {  width: 100%;  cursor: move;}.jqResize {   width: 15px;   position: absolute;   bottom: 0;   right: 0;   cursor: se-resize;}.jqDnR {    z-index: 3;    position: relative;        width: 180px;    font-size: 0.77em;    color: #618d5e;    margin: 5px 10px 10px 10px;    padding: 8px;    background-color: #EEE;    border: 1px solid #CCC;}

<div id="ex1" class="jqDnR">  I am an example Box "#ex1"<br />  You can *RESIZE* Me.  <div class="jqHandle jqResize"></div></div>

$().ready(function() {  $('#ex2').jqDrag();    $('#ex2b')    .css('opacity',0.6)    .jqDrag();});

CSS inherited from Example 1.

<div id="ex2" class="jqDnR jqDrag">  I am an example Box "#ex2"<br />  You can *DRAG* Me.</div><div id="ex2b" class="jqDnR jqDrag">  I am an example Box "#ex2"<br />  You can *DRAG* Me. <br />  Notice my Original Opacity is preserved.</div>

$().ready(function() {  $('#ex3').jqDrag('.jqDrag').jqResize('.jqResize');});

CSS inherited from Example 1.

<div id="ex3" class="jqDnR">  <div class="jqHandle jqDrag"></div>  <br />  I am an example Box "#ex3"<br />  Using the Handles, you can *RESIZE*  and *DRAG* me.  <div class="jqHandle jqResize"></div></div>

Known Issues, Pending Changes;

• Please report any issues or odd behavior

• OPERA Dragging is broken for relatively posistioned elements (like the examples above) in current version of Opera. The left/top position of elements are returned incorrectly* by $.css('left') and $.css('top'), resulting in the element jumping far down the page. * Opera appears to always return the element position relative to page offset vs. parent element.
• TODO (r3 or r4); Add minimum and maximum height and width during resize. Add onResize, onResizing, onDrag, onDragging, and onDrop callbacks.