基于jquery的jqDnR拖拽溢出的修改_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
* 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);

时间: 2024-07-29 04:55:59

基于jquery的jqDnR拖拽溢出的修改_jquery的相关文章

基于jquery插件实现拖拽删除图片功能_jquery

本文实例为大家分享了jquery插件实现拖拽删除图片功能的具体代码,供大家参考,具体内容如下 实现以下效果 完全拖出这个层,图片会消失,否则图片会回到原来的位置 <html> <head> <title></title> <style type="text/css"> #mydiv{ width:900px; background-color:#444; border:1px solid red} #mydiv2{ width

jQuery实现div拖拽效果实例分析_jquery

本文实例分析了jQuery实现div拖拽效果.分享给大家供大家参考,具体如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> New Document </title> <script type=&q

基于jquery的一个拖拽到指定区域内的效果_jquery

这个可与前两个不同了,这个是拖拽到指定的区域内的特效.其实逻辑方式差不多,只不过不同的是 找到目标元素,用appendTo 的方法插入到目标元素. 具体的代码如下,有兴趣者可以试下.(由于是初学,做的简单,如果有其他的方法请给下指点,我定感激不尽哈...) 复制代码 代码如下: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/htm

JQuery之拖拽插件实现代码_jquery

而很多页面效果都要用到这些位置.不得已,得练练,得记记. 下面就来说说这个基于 JQuery的简易拖拽插件吧. 按惯例,先说说拖拽的原理,以及搞这么一个东东的步骤: 那什么是拖拽呢? 看名字就知道了:就是把一个东东拖来拽去的. 放到我们的DOM上,就是改变它的位置. 它只有两个难点:1.如何知道是在拖? 2.如何知道从哪拖,拖到哪? 其实,这也算不上难点,毕竟两者都是基础的东西,关键在于熟练. 换到js 中,我们搞一个拖拽效果,大致有如下步骤: 1.让元素捕获事件(一般情况下,无非就是mouse

jQuery实现元素拖拽并cookie保存顺序的方法_jquery

本文实例讲述了jQuery实现元素拖拽并cookie保存顺序的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"&

jQuery控制Div拖拽效果完整实例分析_jquery

本文实例讲述了jQuery控制Div拖拽效果的方法.分享给大家供大家参考.具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <

jquery实现鼠标拖拽滑动效果来选择数字的方法_jquery

本文实例讲述了jquery实现鼠标拖拽滑动效果来选择数字的方法.分享给大家供大家参考.具体如下: 这是使用jquery ui实现的一个精美实用的效果,可以通过鼠标拖拽滑动效果来选择数字 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns

jQuery 移动端拖拽(模块化开发,触摸事件,webpack)_jquery

通过jquery可以很容易实现CP端的拖拽.但是在移动端却不好用了.于是我自己写了一个在移动端的拖拽demo,主要用到的事件是触摸事件(touchstart,touchmove和touchend). 这个demo实现的功能是:可以拖拽的元素(在这里是图片)位于列表中,这些元素可以被拖到指定区域,到达指定区域(控制台)后,元素被插入控制台后,原来的拖动元素返回原位置,新的元素依然可以在控制台中拖动,也能拖出控制台. 在这个demo中一个用三个模块,分别为ajax模块,drag模块,position

JS基于面向对象实现的拖拽功能示例_javascript技巧

本文实例讲述了JS基于面向对象实现的拖拽功能.分享给大家供大家参考,具体如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style> #div1 {width:100px; height:100px; background:red; position:absolute;} #div2 {width:100px; height:100px; background:yellow; posit