Javascript에서 크기 조정을 구현하려면 어떻게해야합니까?

Question

jQuery 및 이와 유사한 Javascript 프레임 워크는 크기 조정 기능을 제공하지만 Javascript에 대한 자세한 내용을 보려면 구현 방법을 이해하고 싶습니다.

나는 그것이 할 수있는 몇 가지 방법을 생각할 수 있지만 실제로 어떻게 구현됩니까? mouseover 이벤트는 전체 요소에 적용되므로 마우스가 요소의 가장자리 위로 마우스를 가져갈 때만 크기를 조정할 수 있습니까?

구현 방법이 여러 가지가있는 경우 어떻게 다릅니 까? Javascript가 당분간 해결할 수없는 중요한 제한 사항이 있습니까?

모든 세부 정보에 대한 답변을 보내 주시면 감사하겠습니다. 또한 "마법"이 발생하는 프레임 워크 소스 코드의 관련 부분으로 나를 안내 할 수 있다면 좋을 수도 있지만 꼭 필요한 것은 아닙니다.

Answer 1

실제로 크기 조정 가장자리는 크기 조정을 위해 마우스 이벤트를 처리하는 별도의 요소입니다.

일반 오래된 자바 스크립트를 사용하여 크기 조정 영역을 만드는 것은 귀찮은 일이며 프레임 워크를 사용하여 얻을 수있는 효과에 대해 더 많은 코드를 작성해야합니다.

Answer 2

예제를 작성하는 데 시간이 걸렸습니다. 그것은 여기 :

http://blixt.org/js/resize.html

(참고 :. 나는 그것을 크로스 브라우저 호환이었다 있는지 확인하는 시간을 고려하지 않았기 때문에 이것은 아마 모든 브라우저에서 작동하지 않습니다)

기본적으로 커서가 요소 가장자리에서 얼마나 멀리 떨어져 있는지 확인하기 위해 mousemove 이벤트를 사용하고, 가장자리에 충분히 근접하면 해당 가장자리에 커서를 표시합니다. 자바 스크립트는 다음과 같습니다 :

(참고 : 실제 프로젝트에서는 크로스 브라우저 호환성, 유지 보수성 및 라이브러리 간의 상호 작용을 위해이 코드를 매우 다르게 지정할 것입니다. 개발자는 jQuery과 같은 프레임 워크를 사용해야합니다. 이 모든 것들에 대해 이미 생각했다.)

var r = document.getElementById('resizable'); 
r.onmousemove = function (e) { 
    if (!e) e = window.event; 

    var 
    // Get the distances to all the edges. 
    // e.clientX is the X coordinate on the client area (window) of the mouse. 
    // r.offsetLeft is the horizontal offset from the page left. 
    // r.offsetWidth is the total width of the element. 
    left = e.clientX - r.offsetLeft, top = e.clientY - r.offsetTop, 
    bottom = r.offsetHeight - top, right = r.offsetWidth - left, 
    // Get the shortest distance to any of the edges. 
    min = Math.min(Math.min(Math.min(top, left), bottom), right); 

    // If the pointer is further than 5 pixels from an edge, do not display 
    // any resize cursor. 
    if (min > 5) { 
     r.style.cursor = 'default'; 
     return; 
    } 

    // Determine which cursor to display. 
    switch (min) { 
     case top: 
      r.style.cursor = 'n-resize'; 
      break; 
     case left: 
      r.style.cursor = 'w-resize'; 
      break; 
     case bottom: 
      r.style.cursor = 's-resize'; 
      break; 
     case right: 
      r.style.cursor = 'e-resize'; 
      break; 
    } 
}