Как я могу упростить этот код JavaScript

Question

У меня есть три div, которые сложены css поверх друг друга. Средний должен быть перетаскиваемым разделителем, так что верхний div и его содержимое выше, а другой div ниже. И каждый имеет свою собственную полосу прокрутки. См jsfiddle

Это работает, однако если найти мой JS код не очень хорошо, потому что он установил высоту трех дивов отдельно:

HTML-:

<div id="wrapper"> 
    <div id="content"> 
    <div id="dragger"></div> 
    <div id="footer"></div> 
</div> 

устанавливаемого сотовый код

#wrapper { 
    height: 100%; 
    width: 100%; 
    overflow: auto; 
    position: relative; 
} 
#content { 
    position: fixed; 
    bottom: 25%; 
    width:100%; 
    height: 75%; 
    overflow:scroll; 
    overflow-x:hidden; 
} 
#dragger { 
    position: fixed; 
    bottom: 25%; 
    width:100%; 
    cursor: ns-resize; 
    height: 5px; 
} 
#footer { 
    position: fixed; 
    bottom: 0; 

    width:100%; 
    height: 25%; 
    overflow:scroll; 
    overflow-x:hidden; 
} 

Код js:

... 
    $('#footer').css({ 
     "height": bodySize - e.pageY 
    }); 
    $('#content').css({ 
     "bottom": bodySize - e.pageY, 
      "height": e.pageY 
    }); 
    $('#dragger').css({ 
     "bottom": bodySize - e.pageY 
    }); 
    ... 

Есть ли лучший способ добиться такого же поведения, я подумал о том, как сделать нижний колонтитул и содержание div высоты в зависимости от положения dragger в css. Но я не знаю как. Может кто-нибудь мне помочь?

Answer 1

http://jsfiddle.net/d4j3V/4/

Вы делаете тот же вызов в три раза. Вместо того, чтобы делать это, просто вычислить его в начале:

var height = bodySize - e.pageY; 

Затем отброшенный переменный каждое место, которое вы сделали расчет:

$('#footer').css({ 
    "height": height 
}); 
$('#content').css({ 
    "bottom": height, 
    height": e.pageY 
}); 
$('#dragger').css({ 
    "bottom": height 
}); 

Кроме того, вместо вызова $(document.body) три разных времен, просто ЦЕПЬ различные on звонки вместе.

$(document.body).on("mousemove", function (e) { 
    .... 
}).on("mousedown", "#dragger", function (e) { 
    .... 
}).on("mouseup", function (e) { 
    .... 
});