세로 높이를 변경하려면 끌 막대를 만드는 방법?

Question

저는 100 % 높이의 div를 세로로 드래그하여 나누려고합니다. http://jsfiddle.net/k5rtbzs5/

HTML은 다음과 같습니다 :

<div class="column"> 
    <div class="top"> 
     test 
    </div> 

    <div class="slider"></div> 

    <div class="bot"> 
     test 
    </div> 
</div> 

CSS의는 다음과 같습니다

html { 
    height: 100%; 
    width: 100%; 
} 

body { 
    height: 100%; 
} 

.column { 
    width: 100%; 
    height: 100%; 
    border: solid #000; 
} 

.top { 
    width: 100%; 
    height: 50%; 
    background-color: #989898; 
} 

.bot { 
    width: 100%; 
    height: 50%; 
    background-color: #686868; 
} 

.slider { 
    width: 100%; 
    height: 10px; 
    background-color: #000; 
} 

이 어떻게 사업부 = "슬라이더"할 수있을 수 있습니다 여기에 내가 현재 가지고있는의 바이올린입니다 div = "top"및 div = "bot"의 높이를 드래그하여 변경 하시겠습니까? 또한 div = "column"을 브라우저 윈도우의 전체 높이로 유지하려고합니다.

감사

Answer 1

당신은 jQuery를 사용하여 상단과 하단 된 div의 높이를 변경하려면에서 mousemove 이벤트를 사용할 수 있습니다.

$(document).ready(function(){ 
    $('.slider').on('mousedown',function(e){ 
    $('.column').on('mousemove',function(e){ 
     diff = $('.slider').offset().top + 5 - e.pageY ; 
     $('.top').height($('.top').height()-diff); 
     $('.bot').height($('.bot').height()+diff); 
    }); 
    }); 
    $('.column').on('mouseup',function(){ 
     $('.column').off('mousemove'); 
    }); 
}); 

jsfiddle:http://jsfiddle.net/ndud4ff7/

: 여기 는 jQuery 코드입니다