jqDnR 层拖动插件可运行版

上篇下篇

jqDnR 层拖动插件可运行版

2014年12月01日 ⁄ ajax&jquery&javascript ⁄ 共 4193字 ⁄ 暂无评论

/* jqDnR.js
* 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 
* last modified by leegle 2011.02.11 
* fix bug:溢出之后不能回来的,添加在范围内移动 
*/ 
(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') { 
//修改的位置 李飞二〇一一年二月十一日 14:35:19 
E.css({ left: (M.X + v.pageX - M.pX)<0? 0:(M.X + v.pageX - M.pX)<document.documentElement.clientWidth- M.W?(M.X + v.pageX - M.pX):document.documentElement.clientWidth- M.W, top: (M.Y + v.pageY - M.pY)<0?0:(M.Y + v.pageY - M.pY)<document.documentElement.clientHeight -M.H ?(M.Y + v.pageY - M.pY): document.documentElement.clientHeight- M.H }); 
} 
else {E.css({ width: 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); $(document).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') { 
p = E.position(); 
if (!($.browser.msie && ($.browser.version == "6.0")) && (E.css('position') == 'fixed')) { 
p.top -= $(window).scrollTop(); p.left -= $(window).scrollLeft() 
} 
} 
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 }); $(document).mousemove($.jqDnR.drag).mouseup($.jqDnR.stop); 
return false; 
}); 
}); 
}, 
f = function(k) { return parseInt(E.css(k)) || false; }; 
})(jQuery);

demo.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=7" />
 
<meta content="{#metakey#}" name="keywords" />
<meta content="{#metacon#}" name="description" />
<style>


.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;
}
</style>


<script type='text/javascript' src='http://ajax.useso.com/ajax/libs/jquery/1.7.2/jquery.min.js?ver=3.4.2'></script>
 <script type='text/javascript' src='jqDnR.js'></script>


 
</head>




<body  >
<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>


</body>


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


</script>
</html>


	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>