「要素のドラッグによるサイズ変更」は、動的に変更されるオブジェクトが異なることを除いて、実際には「要素のドラッグ」と同じ原理であり、主に上、左、幅、高さの使用にあり、これは比較的簡単です。実装する。ソース コードのプロトタイプを以下に添付します。原理を理解して他の実際のアプリケーションを拡張すると、アイデアがより単純かつ明確になります。以下は JavaScript コードです。 コードをコピーします コードは次のとおりです: <br>/* <br>* jQuery.Resize by wuxinxi007 <br>* Date: 2011-5-14 <br>*/ <br>$(function(){ <br>//ドラッグしてサイズを変更する必要がある要素オブジェクトをバインドします <br>bindResize(document.getElementById(' test')); <br>}); <br><br>function bindingResize(el){ <br>//初期化パラメータ<br>var els = el.style, <br>//マウスのXとYの軸座標 <br>x = y = 0 <br>//邪悪な人差し指 <br>$(el).mousedown(function(e){ <br>//押した後要素、現在のマウスとオブジェクトの計算を計算します。 その後の座標 <br>x = e.clientX - el.offsetWidth, <br>y = e.clientY - el.offsetHeight <br>// setCapture el.setCapture ? ( <br>//フォーカスをキャプチャ<br>el.setCapture(), <br>//イベントを設定<br>el.onmousemove = function(ev){ <br>mouseMove(ev ||イベント) <br>}, <br>el.onmouseup = MouseUp <br>) : ( <br>//バインディング イベント <br>$(document).bind("mousemove",mouseMove).bind("mouseup" ,mouseUp) <br>) <br>//デフォルトイベントの発生を防止します<br>e.preventDefault() <br>}); <br>//イベントを移動<br>function MouseMove(e){ <br>//宇宙は無敵です .. <br>els.width = e.clientX - x 'px', <br>els.height = e.clientY - y 'px' <br>} <br>// Stop イベント<br>function MouseUp( ){ <br>// releaseCapture<br>el.releaseCapture をサポートするために何かをしますか? ( <br>//フォーカスを解放します<br>el.releaseCapture(), <br>//削除しますイベント<br>el .onmousemove = el.onmouseup = null <br>) : ( <br>//アンロード イベント<br>$(document).unbind("mousemove",mouseMove).unbind("mouseup",mouseUp ) <br>) <br>} <br>} <br>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
