순수 JavaScript를 사용하여 크기 조정 가능한 HTML 요소를 만드는 방법은 무엇입니까?

순수한 JavaScript로 크기 조정 가능한 HTML 요소 생성

요소 크기 조정을 가능하게 하는 수많은 라이브러리가 있지만 순수한 JavaScript 솔루션을 찾는 사람들을 위한 다음은 다음과 같습니다. 단계를 활용할 수 있습니다:

1. 이벤트 리스너: 원하는 HTML 요소에 클릭 이벤트 리스너를 연결합니다. 이렇게 하면 크기 조정 프로세스가 시작됩니다.
2. 클래스 추가: 요소에 CSS 클래스(예: "resizing")를 추가하여 크기 조정 모드에 진입했음을 시각적으로 나타냅니다.
3. Resizer 요소 생성:
   와 같은 새 HTML 요소를 생성하고 클래스 "리사이저" 이 요소는 드래그 핸들 역할을 합니다.
4. Resizer용 이벤트 리스너: 드래그 프로세스의 시작을 트리거하는 마우스다운 이벤트 리스너를 리사이저에 추가합니다.
5. 드래그 시작: 초기 마우스 위치, 요소 크기를 저장하고 크기를 조정합니다. 요소.
6. 드래그 기능: 문서에 mousemove 이벤트 리스너를 추가하여 마우스가 움직일 때 요소의 크기를 업데이트합니다.
7. 드래그 종료: mouseup에서 mousemove 및 mouseup 이벤트 리스너를 제거하고 크기 조정을 완료합니다. process.

다음은 이 접근 방식을 구현하는 샘플 코드 조각입니다.

var p = document.querySelector('p'); // element to make resizable

p.addEventListener('click', function init() {
    p.removeEventListener('click', init, false);
    p.className = p.className + ' resizable';
    var resizer = document.createElement('div');
    resizer.className = 'resizer';
    p.appendChild(resizer);
    resizer.addEventListener('mousedown', initDrag, false);
}, false);

var startX, startY, startWidth, startHeight;

function initDrag(e) {
   startX = e.clientX;
   startY = e.clientY;
   startWidth = parseInt(document.defaultView.getComputedStyle(p).width, 10);
   startHeight = parseInt(document.defaultView.getComputedStyle(p).height, 10);
   document.documentElement.addEventListener('mousemove', doDrag, false);
   document.documentElement.addEventListener('mouseup', stopDrag, false);
}

function doDrag(e) {
   p.style.width = (startWidth + e.clientX - startX) + 'px';
   p.style.height = (startHeight + e.clientY - startY) + 'px';
}

function stopDrag(e) {
    document.documentElement.removeEventListener('mousemove', doDrag, false);
    document.documentElement.removeEventListener('mouseup', stopDrag, false);
}

이 접근 방식은 모든 브라우저 및 Internet Explorer 이하 버전과 호환되지 않을 수 있다는 점에 유의하세요. 특히 9에는 문제가 있는 것으로 알려져 있습니다.