"요소 드래그로 크기 변경"은 동적으로 변경되는 개체가 주로 위쪽, 왼쪽, 너비, 높이를 사용한다는 점을 제외하고는 실제로 "요소 드래그"와 동일한 원리이며 비교적 쉽습니다. 구현합니다. 아래에 소스코드 프로토타입을 첨부합니다. 원리를 이해하고 다른 실제 적용을 확장해 보면 아이디어가 훨씬 간단하고 명확해집니다. 다음은 JavaScript 코드입니다 코드 복사 코드는 다음과 같습니다. <br>/* <br>* jQuery.Resize by wuxinxi007 <br>* 날짜: 2011-5-14 <br>*/ <br>$(function(){ <br>//드래그하여 크기를 변경해야 하는 요소 객체 바인딩 <br>bindResize(document.getElementById(' test')); <br>}); <br><br>functionbindResize(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를 지원하는 작업 수행 <br>el.setCapture ? ( <br>//포커스 캡처<br>el.setCapture(), <br>//이벤트 설정<br>el.onmousemove = function(ev){ <br>mouseMove(ev || event) <br>}, <br>el.onmouseup = mouseUp <br>) : ( <br>//Binding 이벤트 <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>// 이벤트 중지<br>function mouseUp( ){ <br>//releaseCapture를 지원하기 위한 작업<br>el.releaseCapture?( <br>//Release focus<br>el.releaseCapture(), <br>//Remove event<br>el .onmousemove = el.onmouseup = null <br>) : ( <br>//이벤트 언로드<br>$(document).unbind("mousemove", mouseMove).unbind("mouseup", mouseUp ) <br>) <br>} <br>} <br>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
