jqDnR 层拖动插件 可运行版
/* jqDnR.js * jqDnR - Minimalistic Drag'n'Resize for jQuery. * * Copyright (c) 2007 Brice Burgess <[email protected]>, 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>