jquery实现拖拽调整Div大小
今天写了一天这个jquery插件:可以实现对p进行拖拽来调整大小的功能。
代码如下:
(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("mouver 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("p").dragdivresize();