Who?
jqDnR

Minimalistic Drag'n'Resize for jQuery


What?

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

Features;

Why?

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:

When?

Current Version: 2007.08.19 +r2
(c) 2007 Brice Burgess under The MIT License

Where?

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]

How?

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

1. Resize
I am an example Box "#ex1"
You can *RESIZE* Me.
Javascript 
$().ready(function() {
  $('#ex1').jqResize('.jqResize');
});
CSS 
.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;
}
HTML 
<div id="ex1" class="jqDnR">
  I am an example Box "#ex1"<br />
  You can *RESIZE* Me.
  <div class="jqHandle jqResize"></div>
</div>
2. Drag
I am an example Box "#ex2"
You can *DRAG* Me.
I am an example Box "#ex2"
You can *DRAG* Me.
Notice my Original Opacity is preserved.
Javascript 
$().ready(function() {
  $('#ex2').jqDrag();
  
  $('#ex2b')
    .css('opacity',0.6)
    .jqDrag();
});
CSS 
CSS inherited from Example 1.
HTML 
<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>
3. Resize + Drag

I am an example Box "#ex3"
Using the Handles, you can *RESIZE* and *DRAG* me.
Javascript 
$().ready(function() {
  $('#ex3').jqDrag('.jqDrag').jqResize('.jqResize');
});
CSS 
CSS inherited from Example 1.
HTML 
<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>

Etc.

Known Issues, Pending Changes;