jqDnR 层拖动插件 潇湘博客

原文地址:http://dev.iceburg.net/jquery/jqDnR/

说明和使用方法:
jqDnR

Minimalistic Drag'n'Resize for jQuery

What?

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

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 {
	 100%;
	cursor: move;
}

.jqResize {
	  15px;
	 position: absolute;
	 bottom: 0;
	 right: 0;
	 cursor: se-resize;
}

.jqDnR {
    z-index: 3;
    position: relative;
    
     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;

• 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.
• ///////////////////////////////////////////////////////////////////////
• 
  
• 
  
• JQUERY 代码:
  
• 
  
• 
  
• 
  
• /*
   * jqDnR - Minimalistic Drag'n'Resize for jQuery.
   *
   * Copyright (c) 2007 Brice Burgess <bhb@iceburg.net>, http://www.iceburg.net
   * Licensed under the MIT License:
   * http://www.opensource.org/licenses/mit-license.php
   *
   * $Version: 2007.08.19 +r2
   */
  
  (function($){
  $.fn.jqDrag=function(h){return i(this,h,'d');};
  $.fn.jqResize=function(h){return i(this,h,'r');};
  $.jqDnR={dnr:{},e:0,
  drag:function(v){
   if(M.k == 'd')E.css({left:M.X+v.pageX-M.pX,top:M.Y+v.pageY-M.pY});
   else E.css({Math.max(v.pageX-M.pX+M.W,0),height:Math.max(v.pageY-M.pY+M.H,0)});
    return false;},
  stop:function(){E.css('opacity',M.o);$().unbind('mousemove',J.drag).unbind('mouseup',J.stop);}
  };
  var J=$.jqDnR,M=J.dnr,E=J.e,
  i=function(e,h,k){return e.each(function(){h=(h)?$(h,e):e;
   h.bind('mousedown',{e:e,k:k},function(v){var d=v.data,p={};E=d.e;
   // attempt utilization of dimensions plugin to fix IE issues
   if(E.css('position') != 'relative'){try{E.position(p);}catch(e){}}
   M={X:p.left||f('left')||0,Y:p.top||f('top')||0,W:f('width')||E[0].scrollWidth||0,H:f('height')||E[0].scrollHeight||0,pX:v.pageX,pY:v.pageY,k:d.k,o:E.css('opacity')};
   E.css({opacity:0.8});$().mousemove($.jqDnR.drag).mouseup($.jqDnR.stop);
   return false;
   });
  });},
  f=function(k){return parseInt(E.css(k))||false;};
  })(jQuery);