今天写了一天这个jquery插件:
可以实现对div进行拖拽来调整大小的功能。
复制代码 代码如下:
(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 var target = this[i];
$(target).on(mouseover mousemove, overhandler);
}
function outhandler() {
for (var i = 0; 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.style.outline = 2px dashed #333;
if ((0 > target.offsetleft + w - _startx || target.offsetleft + w - _startx > size) && 0 resizew = false;
resizeh = true;
document.body.style.cursor = s-resize;
}
if (0 target.offsettop + h - _starty || target.offsettop + h - _starty > size)) {
resizew = true;
resizeh = false;
document.body.style.cursor = w-resize;
}
if (0 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 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();
} 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();
记录一下今天的劳动成果,可能会有很多不成熟的地方,欢迎大家来指正,谢谢!
以上就是本文的全部内容了,希望大家能够喜欢。