基于jquery的jqDnR拖拽溢出的修改
更新時(shí)間:2011年02月12日 16:38:23 作者:
fix bug:溢出之后不能回來的,添加在范圍內(nèi)移動(dòng),需要的朋友可以參考下。
復(fù)制代碼 代碼如下:
/*
* 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:溢出之后不能回來的,添加在范圍內(nèi)移動(dòng)
*/
(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);
您可能感興趣的文章:
- jquery實(shí)現(xiàn)點(diǎn)擊查看更多內(nèi)容控制段落文字展開折疊效果
- JS/jQuery實(shí)現(xiàn)默認(rèn)顯示部分文字點(diǎn)擊按鈕顯示全部?jī)?nèi)容
- 基于Jquery的文字自動(dòng)截?。ㄌ峁┰创a)
- Jquery截取中文字符串的實(shí)現(xiàn)代碼
- 多種JQuery循環(huán)滾動(dòng)文字圖片效果代碼
- jQuery實(shí)現(xiàn)圖片文字淡入淡出效果
- jquery實(shí)現(xiàn)簡(jiǎn)單文字提示效果
- jQuery插件EnPlaceholder實(shí)現(xiàn)輸入框提示文字
- jQuery實(shí)現(xiàn)控制文字內(nèi)容溢出用省略號(hào)(…)表示的方法
相關(guān)文章
jQuery多文件異步上傳帶進(jìn)度條實(shí)例代碼
這篇文章主要介紹了jQuery多文件異步上傳帶進(jìn)度條實(shí)例代碼,代碼簡(jiǎn)單易懂,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-08-08從零開始學(xué)習(xí)jQuery (五) jquery事件與事件對(duì)象
事件是腳本編程的靈魂. 所以本章內(nèi)容也是jQuery學(xué)習(xí)的重點(diǎn). 本文將對(duì)jQuery中的事件處理以及事件對(duì)象進(jìn)行詳細(xì)的講解.2011-02-02jQuery創(chuàng)建平滑的頁(yè)面滾動(dòng)(頂部或底部)
如何創(chuàng)建一個(gè)平滑的滾動(dòng)效果是本文的目的使用jQuery讓您可以滾動(dòng)到你的網(wǎng)頁(yè)的頂部或底部,相當(dāng)不錯(cuò)的一個(gè)效果,感興趣的你可不要錯(cuò)過了哈2013-02-02jQuery基礎(chǔ)知識(shí)點(diǎn)總結(jié)(DOM操作)
下面小編就為大家?guī)硪黄猨Query基礎(chǔ)知識(shí)點(diǎn)總結(jié)(DOM操作)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-06-06JQuery顯示、隱藏div的幾種方法簡(jiǎn)明總結(jié)
這篇文章主要介紹了JQuery顯示、隱藏div的幾種方法簡(jiǎn)明總結(jié),本文總結(jié)了控制style、控制CSS、JQuery自帶方法等幾種顯示、隱藏div的方法,需要的朋友可以參考下2015-04-04jQuery Ajax 實(shí)現(xiàn)分頁(yè) kkpager插件實(shí)例代碼
本文通過實(shí)例代碼給大家講解了jQuery Ajax 實(shí)現(xiàn)分頁(yè) kkpager插件功能,需要的的朋友參考下吧2017-08-08JQuery設(shè)置文本框和密碼框得到焦點(diǎn)時(shí)的樣式
設(shè)置文本框和密碼框得到焦點(diǎn)時(shí)的樣式,通過jquery來實(shí)現(xiàn),需要注意的是中間用逗號(hào)隔開,感興趣的朋友可以參考下2013-08-08