基于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 相关文章推荐
基于jQuery的图片剪切插件
Aug 03 Javascript
Javascript中的isNaN函数使用说明
Nov 10 Javascript
《JavaScript高级程序设计》阅读笔记(二) ECMAScript中的原始类型
Feb 27 Javascript
JS自定义功能函数实现动态添加网址参数修改网址参数值
Aug 02 Javascript
javascript生成随机数方法汇总
Nov 12 Javascript
浅谈JavaScript 数据属性和访问器属性
Sep 01 Javascript
微信小程序  网络请求API详解
Oct 25 Javascript
浅谈Javascript中的Label语句
Dec 14 Javascript
vue项目中实现缓存的最佳方案详解
Jul 11 Javascript
Vuex模块化应用实践示例
Feb 03 Javascript
JavaScript函数重载操作实例浅析
May 02 Javascript
JS如何生成动态列表
Sep 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
实现了一个PHP5的getter/setter基类的代码
2007/02/25 PHP
提高PHP编程效率 引入缓存机制提升性能
2010/02/15 PHP
php中使用gd库实现下载网页中所有图片
2015/05/12 PHP
php删除二维数组中的重复值方法
2018/03/12 PHP
PHP+MySQL实现消息队列的方法分析
2018/05/09 PHP
点击广告后才能获得下载地址
2006/10/26 Javascript
jqTransform form表单美化插件使用方法
2012/07/05 Javascript
jquery仿QQ商城带左右按钮控制焦点图片切换滚动效果
2013/06/27 Javascript
JQuery使用$.ajax和checkbox实现下次不在通知功能
2015/04/16 Javascript
基于javascript的Form表单验证
2016/12/29 Javascript
JavaScript实现瀑布流图片效果
2017/06/30 Javascript
Vue.js 表单控件操作小结
2018/03/29 Javascript
使用vue-router为每个路由配置各自的title
2018/07/30 Javascript
JointJS JavaScript流程图绘制框架解析
2019/08/15 Javascript
layui对工具条进行选择性的显示方法
2019/09/19 Javascript
Python程序设计入门(4)模块和包
2014/06/16 Python
python多线程编程中的join函数使用心得
2014/09/02 Python
python下载文件时显示下载进度的方法
2015/04/02 Python
Windows 安装 Anaconda3+PyCharm的方法步骤
2019/06/13 Python
python getopt模块使用实例解析
2019/12/18 Python
一个不错的HTML5 Canvas多层点击事件监听实例
2014/04/29 HTML / CSS
HTML5事件方法全部汇总
2016/05/12 HTML / CSS
微信小程序之html5 canvas绘图并保存到系统相册
2019/06/20 HTML / CSS
香港太阳眼镜网上商店:SmartBuyGlasses香港
2016/07/22 全球购物
Monki官网:斯堪的纳维亚的独立时尚品牌
2020/11/09 全球购物
《凡卡》教学反思
2014/04/09 职场文书
初中生操行评语大全
2014/04/24 职场文书
群众路线四风自我剖析材料
2014/10/08 职场文书
2015年大学学生会工作总结
2015/05/13 职场文书
雷锋的观后感
2015/06/10 职场文书
2019入党申请书格式和范文
2019/06/25 职场文书
读《儒林外史》有感:少一些功利,多一些真诚
2020/01/19 职场文书
正确的理解和使用Django信号(Signals)
2021/04/14 Python
Vue提供的三种调试方式你知道吗
2022/01/18 Vue.js
剧场版《转生恶役只好拔除破灭旗标》公开最新视觉图 2023年上映
2022/04/02 日漫
mysql sock 文件解析及作用讲解
2022/07/15 MySQL