jQuery版「エレメントドラッグでサイズ変更」jqueryドラッグでdomサイズ変更
2318 ワード
jQuery版「エレメントドラッグでサイズ変更」の原型で、マウスイベントのマウスの位置を計算し、計算した数値をdomの幅に再付与すればよいのが原理です.実は原生jsに変更できます.もちろん多くのプラグインができて、もっと便利です.しかし、このコードは長くないので、一時的に使うことができます.私が書いたのではなく、https://www.cnblogs.com/yelaiju/archive/2012/02/16/2354602.html
jQuery “ ”
$(function () {
//
bindResize(document.getElementById("test"));
console.log(document)
});
function bindResize(el) {
//
var els = el.style,
// X Y
x = (y = 0);
//
$(el).mousedown(function (e) {
// ,
(x = e.clientX - el.offsetWidth), (y = e.clientY - el.offsetHeight);
// setCapture
el.setCapture
? //
(el.setCapture(),
//
(el.onmousemove = function (ev) {
mouseMove(ev || event);
}),
(el.onmouseup = mouseUp))
: //
$(el).bind("mousemove", mouseMove).bind("mouseup", mouseUp);
//
e.preventDefault();
});
//
function mouseMove(e) {
// ...
(els.width = e.clientX - x + "px"),
(els.height = e.clientY - y + "px");
}
//
function mouseUp() {
// releaseCapture
el.releaseCapture
? //
(el.releaseCapture(),
//
(el.onmousemove = el.onmouseup = null))
: //
$(el)
.unbind("mousemove", mouseMove)
.unbind("mouseup", mouseUp);
}
}