jquery實現(xiàn)拖拽調(diào)整Div大小
更新時間：2015年01月30日 08:53:22 投稿：hebedich
這里給大家分享的是一段自己編寫的使用jQuery實現(xiàn)拽調(diào)整Div層大小的代碼，非常實用，推薦給有需要的小伙伴們。
今天寫了一天這個jquery插件：
可以實現(xiàn)對div進(jìn)行拖拽來調(diào)整大小的功能。
復(fù)制代碼 代碼如下:
(function ($) {
$.fn.dragDivResize = function () {
var deltaX, deltaY, _startX, _startY;
var resizeW, resizeH;
var size = 20;
var minSize = 10;
var scroll = getScrollOffsets();
var _this = this;
for (var i = 0; i < _this.length; i++) {
var target = this[i];
$(target).on("mouseover mousemove", overHandler);
}
function outHandler() {
for (var i = 0; i < _this.length; i++) {
target.style.outline = "none";
}
document.body.style.cursor = "default";
}
function overHandler(event) {
target = event.target || event.srcElement;
var startX = event.clientX + scroll.x;
var startY = event.clientY + scroll.y;
var w = $(target).width();
var h = $(target).height();
_startX = parseInt(startX);
_startY = parseInt(startY);
if ((0 < target.offsetLeft + w - _startX && target.offsetLeft + w - _startX < size) || (0 < target.offsetTop + h - _startY && target.offsetTop + h - _startY < size)) {
target.style.outline = "2px dashed #333";
if ((0 > target.offsetLeft + w - _startX || target.offsetLeft + w - _startX > size) && 0 < target.offsetTop + h - _startY && target.offsetTop + h - _startY < size) {
resizeW = false;
resizeH = true;
document.body.style.cursor = "s-resize";
}
if (0 < target.offsetLeft + w - _startX && target.offsetLeft + w - _startX < size && (0 > target.offsetTop + h - _startY || target.offsetTop + h - _startY > size)) {
resizeW = true;
resizeH = false;
document.body.style.cursor = "w-resize";
}
if (0 < target.offsetLeft + w - _startX && target.offsetLeft + w - _startX < size && 0 < target.offsetTop + h - _startY && target.offsetTop + h - _startY < size) {
resizeW = true;
resizeH = true;
document.body.style.cursor = "se-resize";
}
$(target).on('mousedown', downHandler);
} else {
resizeW = false;
resizeH = false;
$(target).off('mousedown', downHandler);
}
}
function downHandler(event) {
target = event.target || event.srcElement;
var startX = event.clientX + scroll.x;
var startY = event.clientY + scroll.y;
_startX = parseInt(startX);
_startY = parseInt(startY);
if (document.addEventListener) {
document.addEventListener("mousemove", moveHandler, true);
document.addEventListener("mouseup", upHandler, true);
} else if (document.attachEvent) {
target.setCapture();
target.attachEvent("onlosecapeture", upHandler);
target.attachEvent("onmouseup", upHandler);
target.attachEvent("onmousemove", moveHandler);
}
if (event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubble = true;
}
if (event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
}
function moveHandler(e) {
if (!e) e = window.event;
var w, h;
var startX = parseInt(e.clientX + scroll.x);
var startY = parseInt(e.clientY + scroll.y);
target = target || e.target || e.srcElement;
if (target == document.body) {
return;
}
if (resizeW) {
deltaX = startX - _startX;
w = $(target).width() + deltaX < minSize ? minSize : $(target).width() + deltaX;
target.style.width = w + "px";
_startX = startX;
}
if (resizeH) {
deltaY = startY - _startY;
h = $(target).height() + deltaY < minSize ? minSize : $(target).height() + deltaY;
target.style.height = h + "px";
_startY = startY;
}
if (e.stopPropagation) {
e.stopPropagation();
} else {
e.cancelBubble = true;
}
}
function upHandler(e) {
if (!e) {
e = window.event;
}
resizeW = false;
resizeH = false;
target = e.target || e.srcElement;
$(target).on("mouseout", outHandler);
if (document.removeEventListener) {
document.removeEventListener("mousemove", moveHandler, true);
document.removeEventListener("mouseup", upHandler, true);
} else if (document.detachEvent) {
target.detachEvent("onlosecapeture", upHandler);
target.detachEvent("onmouseup", upHandler);
target.detachEvent("onmousemove", moveHandler);
target.releaseCapture();
}
if (e.stopPropagation) {
e.stopPropagation();
} else {
e.cancelBubble = true;
}
}
function getScrollOffsets(w) {
w = w || window;
if (w.pageXOffset != null) {
return { x: w.pageXOffset, y: w.pageYOffset };
}
var d = w.document;
if (document.compatMode == "CSS1Compat") {
return { x: d.documentElement.scrollLeft, y: d.documentElement.scrollTop };
}
return { x: d.body.scrollLeft, y: d.body.scrollTop };
}
}
}(jQuery));
jQuery("div").dragDivResize();
記錄一下今天的勞動成果，可能會有很多不成熟的地方，歡迎大家來指正，謝謝！
以上就是本文的全部內(nèi)容了，希望大家能夠喜歡。
相關(guān)文章
統(tǒng)計jQuery中各字符串出現(xiàn)次數(shù)的工具
如果使用一個變量替換，使用工具壓縮時將會進(jìn)一步減少文件的大小2012-05-05
hover的用法及l(fā)ive的用法介紹(鼠標(biāo)懸停效果)
hover屬性在書寫css時大家都不會陌生了吧live主要用于對動態(tài)加載出來的元素綁定事件，下來將為大家詳細(xì)介紹下兩者的使用，感興趣的朋友可不要錯過了哈2013-03-03
jquery實現(xiàn)的一個導(dǎo)航滾動效果具體代碼
首頁有一個導(dǎo)航頁面要實現(xiàn)滾動效果，索性就仿造別人的效果自己做了一個，大體上還行，看起來還是比較流暢的,現(xiàn)滾動效果，腳本代碼如下，感興趣的朋友可以參考下2013-05-05
jquery中append()與appendto()用法分析
這篇文章主要介紹了jquery中append()與appendto()用法分析,以實例的形式分析了jquery中append()與appendto()的具體語法與詳細(xì)用法,需要的朋友可以參考下2014-11-11
前不久做項目，要用到大量的頁面圓角的框塊，以前實現(xiàn)的時候都是用圖片做背景之類的方法，那種方法對于少數(shù)的還是比較可行的，但是當(dāng)涉及到整個項目都要用 到這樣的效果時就顯得不夠優(yōu)化和簡練了。2009-12-12
jQuery網(wǎng)頁右側(cè)廣告跟隨滾動代碼分享
這篇文章主要介紹了兩種jQuery實現(xiàn)網(wǎng)頁右側(cè)廣告跟隨滾動的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2015-10-10
大家都知道m(xù)ap()方法主要用來遍歷操作數(shù)組和對象，這篇文章將給大家詳細(xì)介紹關(guān)于jQuery遍歷map()方法的內(nèi)容，文章給出了詳細(xì)的示例代碼，對大家的理解和學(xué)習(xí)很有幫助，有需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧。2016-11-11
本篇文章小編將為大家介紹，基于jQuery中對數(shù)組進(jìn)行操作的方法。有需要的朋友可以參考一下2013-04-04
這篇文章主要介紹了jQuery中的select操作詳解的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-11-11
jquery實現(xiàn)點擊a鏈接,跳轉(zhuǎn)之后,該a鏈接處顯示背景色的方法
下面小編就為大家分享一篇jquery實現(xiàn)點擊a鏈接,跳轉(zhuǎn)之后,該a鏈接處顯示背景色的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01