今天寫了一天這個jquery外掛：
可以實現對div進行拖曳來調整大小的功能。
（函數（$）{
$.fn.dragDivResize = function () {
var deltaX, deltaY, _startX, _startY;
var resizeW, resizeH;
變數大小 = 20;
var minSize = 10;
var 滾動 = getScrollOffsets();
var _this = this;
for (var i = 0; i
var target = this[i];
$(target).on("mouseover mousemove", overHandler);
}
函數 outHandler() {
for (var i = 0; i
target.style.outline = "無";
}
document.body.style.cursor = "預設";
}
函數 overHandler(event) {
目標=事件.目標|| event.srcElement;
var startX = event.clientX 捲動.x;
var startY = event.clientY 滾動.y;
var w = $(target).width();
var h = $(target).height();
_startX = parseInt(startX);
_startY = parseInt(startY);
if ((0
if ((0 > target.offsetLeft w - _startX || target.offsetLeft w - _startX > 大小) && 0
resizeH = true;
document.body.style.cursor = "s-resize";
}
if (0 target.offsetToffsetLeft w - _startX target.offsetToffsetLeft >Y
resizeW = true;
resizeH = false;
document.body.style.cursor = "w-resize";
}
會
resizeW = true;
resizeH = true;
document.body.style.cursor = "se-resize";
}
$(target).on('mousedown', downHandler);
} 其他 {
resizeW = false;
resizeH = false;
$(target).off('mousedown', downHandler);
}
}
函數 downHandler(事件) {
目標=事件.目標|| event.srcElement;
var startX = event.clientX 捲動.x;
var startY = event.clientY 滾動.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();
} 其他 {
event.cancelBubble = true;
}
if (event.preventDefault) {
event.preventDefault();
} 其他 {
event.returnValue = false;
}
}
函數 moveHandler(e) {
if (!e) e = window.event;
var w, h;
var startX = parseInt(e.clientXscroll.x);
var startY = parseInt(e.clientYscroll.y);
目標=目標|| e.目標 || e.srcElement;
if (目標 == document.body) {
返回；
}
if (resizeW) {
deltaX = startX - _startX;
w = $(target).width() deltaX
target.style.width = w "px";
_startX = startX;
}
if (resizeH) {
deltaY = startY - _startY;
h = $(target).height() deltaY
target.style.height = h "px";
_startY = startY;
}
if (e.stopPropagation) {
e.stopPropagation();
} 其他 {
e.cancelBubble = true;
}
}
函數 upHandler(e) {
若 (!e) {
e = window.event;
}
resizeW = false;
resizeH = false;
目標 = e.目標 || 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();
} 其他 {
e.cancelBubble = true;
}
}
函數 getScrollOffsets(w) {
w = w ||視窗；
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();
記錄今天的勞動成果，可能會有很多不成熟的地方，歡迎大家來指正，謝謝！
以上就是本文的全部內容了，希望大家能夠喜歡。
