어떻게 프로토 타입을 사용하여, 나는 위의 이미지에서 구글 문서 도구와 같은 구분을 만들려면 어떻게해야합니까 프로토 타입

Question

alt text http://img197.imageshack.us/img197/9084/seperator.png

http://img197.imageshack.us/img197/9084/seperator.png

두 된 DIV 사이에 구분을 만들려면 어떻게해야합니까?

Answer 1

구분 기호는 실제로 테이블 행에 포함 된 표 셀입니다. background-color 및 background-image은 데스크톱 응용 프로그램에서 볼 수있는 것과 비슷한 효과를 제공합니다.

내가 원하는 것은 무엇인지 잘 모르겠지만 표 셀이 이미 마크 업에 지정되어 있고 적절한 스타일이 있다고 가정하면 몇 가지를 설정해야합니다.

• mousedown 사용자가 셀을 클릭했을 때 등록하는 처리기입니다.
• mousemove 브라우저 창의 컨텍스트에서 구분 기호의 위치를 ​​업데이트하는 처리기입니다.
• mouseup 분리 기호의 위치 갱신을 언제 중지해야 하는지를 알기위한 핸들러.

가이 작업을 수행하는 방법에 차이가 있지만, 여기에 매우, 매우 거친 예입니다 : 이미 프로토 타입을 사용하는 경우

var bMouseIsDown = false; 
Event.observe('separator', 'mousedown', function() { 
    bMouseIsDown = true; 
}); 
Event.observe('separator', 'mouseup', function() { 
    bMouseIsDown = false; 
}); 

Event.observe('separator', 'mousemove', function(evt) { 
    if(bMouseIsDown === true) { 
    var iX = Event.pointerX(evt); 
    var iOffsetX = iX - Position.page($('separator'))[0]; 
    var iWidth = $('separator').getDimensions().width; 
    var iElementOffset = iWidth - iOffsetX; 
    $(this).setStyle({ 
     left: iX - iElementOffset 
    }); 
    } 
}); 

Answer 2

, 당신은 일을 구분 기호를 얻기 위해 Scriptaculous draggable를 사용할 수는 그런 다음 해당 이벤트에 연결하여 그에 따라 두 DIV의 크기를 조정하십시오.