Saya menulis pemalam jquery ini sepanjang hari hari ini:
Anda boleh seret dan lepas div untuk mengubah saiznya.
(fungsi ($) {
$.fn.dragDivResize = fungsi () {
var deltaX, deltaY, _startX, _startY;
var resizeW, resizeH;
saiz var = 20;
var minSize = 10;
var scroll = getScrollOffsets();
var _ini = ini;
untuk (var i = 0; i < _this.length; i ) {
var sasaran = ini[i];
$(target).on("mouseover mousemove", overHandler);
}
function outHandler() {
untuk (var i = 0; i < _this.length; i ) {
target.style.outline = "tiada";
}
document.body.style.cursor = "lalai";
}
fungsi overHandler(acara) {
sasaran = acara.sasaran || acara.srcElement;
var startX = event.clientX scroll.x;
var startY = event.clientY scroll.y;
var w = $(sasaran).lebar();
var h = $(sasaran).height();
_startX = parseInt(startX);
_startY = parseInt(startY);
jika ((0 < target.offsetLeft w - _startX && target.offsetLeft w - _startX < saiz) || (0 < target.offsetTop h - _startY && target.offsetTop h - _startY < saiz)) {
target.style.outline = "2px putus-putus #333";
jika ((0 > target.offsetLeft w - _startX || target.offsetLeft w - _startX > saiz) && 0 < target.offsetTop h - _startY && target.offsetTop h - _startY < saiz) {
ubah saizW = palsu;
ubah saizH = benar;
document.body.style.cursor = "s-resize";
}
jika (0 < target.offsetLeft w - _startX && target.offsetLeft w - _startX < saiz && (0 > target.offsetTop h - _startY || target.offsetTop h - _startY > saiz)) {
ubah saizW = benar;
ubah saizH = palsu;
document.body.style.cursor = "w-resize";
}
jika (0 < target.offsetLeft w - _startX && target.offsetLeft w - _startX < saiz && 0 < target.offsetTop h - _startY && target.offsetTop h - _startY < saiz) {
ubah saizW = benar;
ubah saizH = benar;
document.body.style.cursor = "se-resize";
}
$(target).on('mousedown', downHandler);
} lain {
ubah saizW = palsu;
ubah saizH = palsu;
$(target).off('mousedown', downHandler);
}
}
fungsi downHandler(acara) {
sasaran = acara.sasaran || acara.srcElement;
var startX = event.clientX scroll.x;
var startY = event.clientY scroll.y;
_startX = parseInt(startX);
_startY = parseInt(startY);
jika (document.addEventListener) {
document.addEventListener("mousemove", moveHandler, true);
document.addEventListener("mouseup", upHandler, true);
} lain jika (document.attachEvent) {
target.setCapture();
target.attachEvent("onlosecapeture", upHandler);
target.attachEvent("onmouseup", upHandler);
target.attachEvent("onmousemove", moveHandler);
}
jika (event.stopPropagation) {
event.stopPropagation();
} lain {
event.cancelBubble = benar;
}
jika (event.preventDefault) {
event.preventDefault();
} lain {
event.returnValue = palsu;
}
}
function moveHandler(e) {
jika (!e) e = window.event;
var w, h;
var startX = parseInt(e.clientX scroll.x);
var startY = parseInt(e.clientY scroll.y);
sasaran = sasaran || e.sasaran || e.srcElement;
jika (sasaran == document.body) {
kembali;
}
jika (ubah saizW) {
deltaX = startX - _startX;
w = $(sasaran).lebar() deltaX < minSize ? minSize : $(target).width() deltaX;
target.style.width = w "px";
_startX = startX;
}
jika (saiz semulaH) {
deltaY = startY - _startY;
h = $(sasaran).height() deltaY < minSize ? minSize : $(sasaran).height() deltaY;
target.style.height = h "px";
_startY = startY;
}
jika (e.stopPropagation) {
e.stopPropagation();
} lain {
e.cancelBubble = benar;
}
}
fungsi upHandler(e) {
jika (!e) {
e = window.event;
}
ubah saizW = palsu;
ubah saizH = palsu;
sasaran = e.sasaran || e.srcElement;
$(target).on("mouseout", outHandler);
jika (document.removeEventListener) {
document.removeEventListener("mousemove", moveHandler, true);
document.removeEventListener("mouseup", upHandler, true);
} lain jika (document.detachEvent) {
target.detachEvent("onlosecapeture", upHandler);
target.detachEvent("onmouseup", upHandler);
target.detachEvent("onmousemove", moveHandler);
target.releaseCapture();
}
jika (e.stopPropagation) {
e.stopPropagation();
} lain {
e.cancelBubble = benar;
}
}
fungsi getScrollOffsets(w) {
w = w || tingkap;
jika (w.pageXOffset != null) {
pulangkan { x: w.pageXOffset, y: w.pageYOffset };
}
var d = w.dokumen;
if (document.compatMode == "CSS1Compat") {
kembali { x: d.documentElement.scrollLeft, y: d.documentElement.scrollTop };
}
kembali { x: d.body.scrollKiri, y: d.body.scrollTop };
}
}
}(jQuery));
jQuery("div").dragDivResize();
Catat hasil kerja hari ini Mungkin ada banyak perkara yang tidak matang Anda dialu-alukan untuk membetulkan saya.
Di atas adalah keseluruhan kandungan artikel ini, saya harap anda semua menyukainya.