基于jquery的jqDnR拖拽溢出的修改


Posted in Javascript onFebruary 12, 2011
/* 
* 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);
Javascript 相关文章推荐
JAVASCRIPT style 中visibility和display之间的区别
Jan 22 Javascript
jQuery选择没有colspan属性的td的代码
Jul 06 Javascript
Jquery动态改变图片IMG的src地址示例
Jun 25 Javascript
javascript静态页面传值的三种方法分享
Nov 12 Javascript
Javascript动态创建div的方法
Feb 09 Javascript
简化版手机端照片预览组件
Apr 13 Javascript
vue element-ui table表格滚动加载方法
Mar 02 Javascript
vue+Element-ui实现分页效果实例代码详解
Dec 10 Javascript
vue cli3 调用百度翻译API翻译页面的实现示例
Sep 13 Javascript
浅谈vue异步数据影响页面渲染
Oct 29 Javascript
Node.js API详解之 module模块用法实例分析
May 13 Javascript
linux服务器快速卸载安装node环境(简单上手)
Feb 22 Javascript
jQuery1.4.2与老版本json格式兼容的解决方法
Feb 12 #Javascript
在vs2010中调试javascript代码方法
Feb 11 #Javascript
juqery 学习之六 CSS--css、位置、宽高
Feb 11 #Javascript
juqery 学习之五 文档处理 包裹、替换、删除、复制
Feb 11 #Javascript
juqery 学习之五 文档处理 插入
Feb 11 #Javascript
基于JQuery的浮动DIV显示提示信息并自动隐藏
Feb 11 #Javascript
Javascript面向对象之四 继承
Feb 08 #Javascript
You might like
浅析PHP程序防止ddos,dns,集群服务器攻击的解决办法
2013/06/18 PHP
PHP实现基于图的深度优先遍历输出1,2,3...n的全排列功能
2017/11/10 PHP
PHP基于mcript扩展实现对称加密功能示例
2019/02/21 PHP
PHP+redis实现的限制抢购防止商品超发功能详解
2019/09/19 PHP
JQuery.closest(),parent(),parents()寻找父结点
2012/02/17 Javascript
用JavaScript实现使用鼠标画线的示例代码
2014/08/19 Javascript
JavaScript针对网页节点的增删改查用法实例
2015/02/02 Javascript
javascript实现网页屏蔽Backspace事件,输入框不屏蔽
2015/07/21 Javascript
如何使用jquery easyui创建标签组件
2015/11/18 Javascript
jQuery Validate表单验证深入学习
2015/12/18 Javascript
基于JavaScript实现轮播图代码
2016/07/14 Javascript
Bootstrap精简教程中秋大放送
2016/09/15 Javascript
探究Vue.js 2.0新增的虚拟DOM
2016/10/20 Javascript
Javascript之面向对象--方法
2016/12/02 Javascript
简单理解js的冒泡排序
2016/12/19 Javascript
JS中绑定事件顺序(事件冒泡与事件捕获区别)
2017/01/24 Javascript
vue组件之间的数据传递方法详解
2019/04/19 Javascript
js单线程的本质 Event Loop解析
2019/10/29 Javascript
javascript设计模式 ? 中介者模式原理与用法实例分析
2020/04/20 Javascript
nginx配置域名后的二级目录访问不同项目的配置操作
2020/11/06 Javascript
[03:36]2015国际邀请赛第二日现场精彩集锦
2015/08/06 DOTA
200 行python 代码实现 2048 游戏
2018/01/12 Python
Python 中的Selenium异常处理实例代码
2018/05/03 Python
Python生成器的使用方法和示例代码
2019/03/04 Python
python按比例随机切分数据的实现
2019/07/11 Python
python3实现mysql导出excel的方法
2019/07/31 Python
Django多数据库的实现过程详解
2019/08/01 Python
详解Python可视化神器Yellowbrick使用
2019/11/11 Python
Python 3.8 新功能大揭秘【新手必学】
2020/02/05 Python
函授本科个人自我鉴定
2014/03/25 职场文书
年会主持词结束语
2014/03/27 职场文书
《三个小伙伴》教学反思
2014/04/11 职场文书
升国旗演讲稿
2014/09/05 职场文书
行政主管岗位职责
2015/02/03 职场文书
2015年评职称工作总结范文
2015/04/20 职场文书
python实现简单倒计时功能
2021/04/21 Python